Share This Post

介紹

JW Player是一家位於紐約的公司,開發了同名的影音播放器軟體。用於將視頻嵌入網頁的播放器,影音託管公司和自行託管的Web影片使用。該公司還開發了影音管理軟體“ JW Platform”。

WPLAYER 是一款商業播放器,他的特色有:

  1. 相對老字號的播放器
  2. 穩定成熟、功能多
  3. github 星星 2.4k 顆
  4. 開發工具齊全:JavaScript API、SDK..完備
  5. 跨平台
  6. 支援多種影音格式

使用

須先到官網註冊帳號並登入

基本用法

登入後直接上傳影片,上傳後點擊影片,點右上角的Embed,複製裡面的JavaScript或iframe貼到網頁即可使用。

進階用法

登入後可以新增自己的API KEY,並尋找雲端撥放庫URL,並在網頁中新增這兩行。

上傳影片後點擊影片進到影片資訊,點擊View Assests,查看影片解析度,往下顯示點開,點開後將網址複製到程式碼中。

<script src='播放庫URL'></script>
<script>jwplayer.key='API KEY';</script>

剩餘部分,網頁至少須包刮一個div,完整程式碼如下

  • sources
    • file:放影片位址
    • label:放置設定標籤
  • image:影片封面
  • height:影片高
  • width:影片寬
  • autostart:是否自動撥放
  • mute:影片播放時是否靜音
  • repeat:是否循環
  • volume:影片音量初始值
<!DOCTYPE html>
<html>
<head>
    <script src='播放庫URL'></script>
		<script>jwplayer.key='API KEY';</script>
</head>
<body>
<div id="myDiv">This text will be replaced with a player.</div>

<script>
jwplayer("myDiv").setup({
  sources: [{
    file: "./octopus.mp4",
    label:"720"
  },{
    file: "./octopus540.mp4",
    label:"540"
  },{
    file: "./octopus360.mp4",
    label:"720"
  },{
    file: "./octopus270.mp4",
    label:"270"
  },{
    file: "./octopus180.mp4",
    label:"180"
  }],
  "image": "./octopus.png",
  "height": 600,
  "width": 960,
  "autostart": true,
  "mute":"true",
  "repeat": true,
  "volume":50
  
})

</script>
</body>
</html>

其他功能在下方連結

JW player API

其他Demo

寫完這篇才看到另一個大宗的撥放器 Video.js 有興趣可以去玩看看🙃🙃🙃🙃

訂閱研究文章

Get updates and learn from the best

More To Explore

Scroll to Top

hurry up !

軟體工程師培訓

限時免費報名中

藉由與「真實世界軟體專案」相同的技術、工具與開發流程,化簡成與商業機密無關、門檻較低更容易上手的「模擬專案」,讓你有機會在職場前輩的陪伴下,完成真槍實彈的練習,動手解決真實的問題,快速累積個人的經驗與作品,而不只是「學習技術」而已。