Video.js打造网页播放器（图文教程）
生活随笔
收集整理的這篇文章主要介紹了
Video.js打造网页播放器（图文教程）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
下面是我給大家整理的Video.js打造網(wǎng)頁播放器，有興趣的同學(xué)可以去看看。
1.第一步
<link href="video-js.css" rel="stylesheet" type="text/css"> <!-- video.js must be in the <head> for older IEs to work. --> <script src="video.js"></script>
登錄后復(fù)制
2.第二步
<script> videojs.options.flash.swf = "video-js.swf"; </script>
登錄后復(fù)制
3.第三步
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="480" data-setup="{}">
<source src="wangdeshun.mp4" type="video/mp4"/>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
登錄后復(fù)制
4.第四步
<script>
var player = videojs("example_video_1");
// 檢測播放時間
player.on('timeupdate', function () {
console.log('當前播放時間：' = player.currentTime());
}
});
// 開始或恢復(fù)播放
player.on('play', function() {
console.log('開始/恢復(fù)播放');
});
// 暫停播放
player.on('pause', function() {
console.log('暫停播放');
});
/在 <head> 中聲明 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
setTimeout(function(){
player.pause();
},10000);
</script>
登錄后復(fù)制
這樣就可以播放網(wǎng)絡(luò)視頻了。是不是很方便。
檢測視頻是否播放完畢
player.on('timeupdate', function () {
// 如果 currentTime() === duration()，則視頻已播放完畢
if (player.duration() != 0 && player.currentTime() === player.duration()) {
// 播放結(jié)束
}
});
登錄后復(fù)制
如果是手機使用 需要
在 <head> 中聲明 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
登錄后復(fù)制
上面是我整理給大家的Video.js打造網(wǎng)頁播放器，希望今后會對大家有幫助。
相關(guān)文章：
如何在Javascript中自動將輸入的數(shù)字轉(zhuǎn)化成貨幣格式（代碼附上）
如何使用vue.js實現(xiàn)價格格式化（代碼附上）
js原生代碼實現(xiàn)數(shù)據(jù)雙向綁定（可以直接拿來使用，已經(jīng)封裝好了）
以上就是Video.js打造網(wǎng)頁播放器（圖文教程）的詳細內(nèi)容，更多請關(guān)注風(fēng)君子博客其它相關(guān)文章！
總結(jié)
以上是生活随笔為你收集整理的Video.js打造网页播放器（图文教程）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据类型定义语句
- 下一篇： 企业宽带路由器的选购技巧与推荐