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

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

亚连

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

asal

3981 orang telah melayarinya

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

Salin selepas log masuk

2.第二步

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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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

检测视频是否播放完毕

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

Salin selepas log masuk

如果是手机使用需要

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

Salin selepas log masuk

上面是我整理给大家的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!

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

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