Home > Article > Web Front-end > Create a web player with Video.js (graphic tutorial)

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

亚连Original: 2018-05-18 13:59:233982browse

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>

2. The second step

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

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>

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>

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()) {  
            // 播放结束  
        }  
    });

If it is needed for mobile phone use

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

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to automatically convert entered numbers into currency format in Javascript (code attached)Next article：How to automatically convert entered numbers into currency format in Javascript (code attached)

See more

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

Related articles