Create a web player with Video.js (graphic tutorial)-JS Tutorial-php.cn

Create a web player with Video.js (graphic tutorial)

亚连

Release： 2018-05-18 13:59:23

Original

4016 people have browsed it

The following is the Video.js web player I compiled for you. Interested students can take a look.

1. The first step

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

Copy after login

2. The second step

<script>  
   videojs.options.flash.swf = "video-js.swf";  
 </script>

Copy after login

3. The third step

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

Copy after login

4. Step 4

<script>  
    var player = videojs("example_video_1");  
    // 检测播放时间  
    player.on(&#39;timeupdate&#39;, function () {    
        console.log(&#39;当前播放时间：&#39; = player.currentTime());  
    }  
    });  
    // 开始或恢复播放  
    player.on(&#39;play&#39;, function() {    
        console.log(&#39;开始/恢复播放&#39;);  
    });  
    // 暂停播放  
    player.on(&#39;pause&#39;, function() {    
        console.log(&#39;暂停播放&#39;);  
    });  
/在 <head> 中声明 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">   
    setTimeout(function(){  
        player.pause();  
    },10000);  
 </script>

Copy after login

So you can play online videos. Isn't it very convenient?

Detect whether the video has been played

player.on(&#39;timeupdate&#39;, function () {    
    // 如果 currentTime() === duration()，则视频已播放完毕  
    if (player.duration() != 0 && player.currentTime() === player.duration()) {  
            // 播放结束  
        }  
    });

Copy after login

If it is needed for mobile phone use

在 <head> 中声明 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Copy after login

The above is the Video.js web player I compiled for everyone. I hope it will be useful to everyone in the future helpful.

How to automatically convert input numbers into currency format in Javascript (code attached)

How to use vue.js to implement price formatting (code attached)

js native code to implement two-way data binding (can be used directly, already encapsulated)

The above is the detailed content of Create a web player with Video.js (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!