您的当前位置：首页正文

Video.js打造网页播放器（图文教程）

2020-11-27 来源：哗拓教育

下面是我给大家整理的Video.js打造网页播放器，有兴趣的同学可以去看看。

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>

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>

4.第四步

<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">

上面是我整理给大家的Video.js打造网页播放器，希望今后会对大家有帮助。

如何在Javascript中自动将输入的数字转化成货币格式（代码附上）

如何使用vue.js实现价格格式化（代码附上）

js原生代码实现数据双向绑定（可以直接拿来使用，已经封装好了）