介紹
JW Player是一家位於紐約的公司,開發了同名的影音播放器軟體。用於將視頻嵌入網頁的播放器,影音託管公司和自行託管的Web影片使用。該公司還開發了影音管理軟體“ JW Platform”。
WPLAYER 是一款商業播放器,他的特色有:
- 相對老字號的播放器
- 穩定成熟、功能多
- github 星星 2.4k 顆
- 開發工具齊全:JavaScript API、SDK..完備
- 跨平台
- 支援多種影音格式
使用
須先到官網註冊帳號並登入
基本用法
登入後直接上傳影片,上傳後點擊影片,點右上角的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>
其他功能在下方連結
寫完這篇才看到另一個大宗的撥放器 Video.js 有興趣可以去玩看看🙃🙃🙃🙃