cari

Rumah >hujung hadapan web >tutorial js >Video.js打造网页播放器（图文教程）

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

亚连
亚连asal
2018-05-18 13:59:234009semak imbas

下面是我给大家整理的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(&#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>

这样就可以播放网络视频了。是不是很方便。

检测视频是否播放完毕

player.on(&#39;timeupdate&#39;, 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原生代码实现数据双向绑定（可以直接拿来使用，已经封装好了）

Atas ialah kandungan terperinci Video.js打造网页播放器（图文教程）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何在Javascript中自动将输入的数字转化成货币格式（代码附上）Artikel seterusnya：关于JS中String()与 .toString()的区别(结合代码，一目了然)

Artikel berkaitan

Lihat lagi