使用Video.js打造網頁播放器
阿新 • • 發佈：2019-01-25
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>2.第二步
<script>
videojs.options.flash.swf = "video-js.swf";
</script>4.第四步<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>
<script> var player = videojs("example_video_1"); // 檢測播放時間 player.on('timeupdate', function () { console.log('當前播放時間：' = player.currentTime()); } }); // 開始或恢復播放 player.on('play', function() { console.log('開始/恢復播放'); }); // 暫停播放 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>
這樣就可以播放網路視訊了。是不是很方便。
檢測視訊是否播放完畢
player.on('timeupdate', function () {
// 如果 currentTime() === duration()，則視訊已播放完畢
if (player.duration() != 0 && player.currentTime() === player.duration()) {
// 播放結束
}
});在 <head> 中宣告 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">