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

Commitizen

前言: 現今軟體功能複雜與龐大,在開發過程中,不管單人開發還是多人協作,對所編寫的代碼與代碼版本管控都是必須的

NFC x Mifare

實作紀錄 readMifare readNdef 知識補充 手機NFC隱含攻擊弱點 掌握原理避免無線盜刷 MI

Scroll to Top