HTML5视頻播发软件 video.js详细介绍

2021-02-23 00:50 jianzhan

video.js是1款很时兴的html5视頻播发软件。很合适在挪动端播发视頻(例如手机微信网页页面),作用强劲,且适用退级到flash,适配ie8。官方网站:http://videojs.com/    git&demo  :http://files.cnblogs.com/files/stoneniqiu/video-js⑸.11.4.zip

看下默认设置事例:

controls表明操纵条,prload:预载入,poster表明最开始的显示信息的照片。data-set适用用json来设定1些主要参数。source无需说了,track指的是字幕。

 这模样就出来了,可是在具体中大家也有别的要求。

不必字幕:

必须运用novtt的js,在demo的alt文档中。这样视頻操纵条中就不容易出現字母的挑选。自然你已不必须网页页面中的track元素了。

<link href="~/js/video-js⑸.11.4/alt/video-js-cdn.min.css" rel="stylesheet" />
<script src="~/js/video-js⑸.11.4/alt/video.novtt.min.js"></script>

宽高自融入:

刚开始用css自身设定,发现如何都沒有实际效果。视頻元素不一样于1般的元素,必须根据设定本质元素的比率来保证回应式的宽高。video.js出示了两种方法。

js:设定1个fluid为true。

 var player = videojs('video', { fluid: true }, function () {
           console.log('Good to go!');
           this.play(); // if you don't trust autoplay for some reason  
})

但这个还必须给video元素设定1个起止的宽高,要不然刚开始的照片看看不到。

css:能够立即加上款式。有3种 .vjs-fluid,.vjs⑷⑶,.vjs⑴6⑼ 第1种它会全自动测算,后边两种特定比率。 款式也必须设定起止宽高才可以显示信息照片

 <video id="video" class="video-js vjs-default-skin vjs-fluid" poster="http://vjs.zencdn.net/v/oceans.png" width="375" height="200" controls preload="none"
           data-setup='{ "html5" : { "nativeTextTracks" : false } }'>
        <source src="@Model.Url" type="video/mp4">
        <p class="vjs-no-js">  播发视頻必须开启 JavaScript,强烈推荐应用<a href="http://videojs.com/html5-video-support/" target="_blank">适用HTML5</a>的访问器浏览。</p>
    </video>

恶性事件关心:

大家1般关心刚开始,中止,完毕这3个恶性事件

 var player = videojs('video', { }, function () {
           console.log('Good to go!');
           //this.play(); // if you don't trust autoplay for some reason
       });
       player.on('play', function () {
           console.log('刚开始/修复播发');
       });
       player.on('pause', function () {
           console.log('中止播发');
       });
       player.on('ended', function () {
           console.log('完毕播发');
       });

 也有升级恶性事件:

player.on('timeupdate', function() {
           console.log(player.currentTime());
       });

能够根据分辨当今時间和总時间是不是相同来分辨视頻是不是完毕:

player.on('timeupdate', function () {  
    // 假如 currentTime() === duration(),则视頻已播发结束
    if (player.duration() != 0 && player.currentTime() === player.duration()) {
            // 播发完毕
        }
    });

有老前辈指出在ended恶性事件在安卓系统机器设备上沒有正确开启(先备着)。

MIME种类设定

默认设置的iis MIME设定是沒有提升mp4种类的,会出現当地播发沒有难题,可是到了服务器上就出404不正确。这必须在iis中设定MIME:

普遍视頻文件格式:

flv文件格式是添加关系拓展名:.flv,內容种类:application/octet-stream
f4v文件格式是拓展名:.f4v,內容种类:application/octet-stream
mp4文件格式是拓展名:.mp4,內容种类:video/mp4
ogv文件格式是拓展名:.ogv ,內容种类:video/ogg
webm文件格式是拓展名:.webm,內容种类:video/webm
设定完重新启动iis才可以起效。

款式自定

 官方给了1个codepen的详细地址 http://codepen.io/heff/pen/EarCt 能够编写玩玩。 关键是播发按钮,操纵条和进度条。默认设置便是上面那样。

 也有这款:http://codepen.io/zanechua/pen/GozrNe   SublimeVideo

Flash设定

Playback技术性用来在访问器或软件中播发视頻或声频文档,假如是h5会应用video或audio元素,假如是flash,会界定1个flash播发器。不止flash,还适用Silverlight、Quicktime等技术性播发。能够在元素中立即界定data-setup。特定适用的技术性。

<video data-setup='{"techOrder": ["html5", "flash", "other supported tech"]}'

或应用JavaScript:

videojs("videoID", {
  techOrder: ["html5", "flash", "other supported tech"]
});

这里默认设置的标准是,会用第1项技术性去播发,不好再应用后边的选项。例如上方html5写在第1位,就会用html5播发全部的视頻。假如大家想flash优先选择,放在前面便可:

 data-setup='{ "techOrder": ["flash","html5"] }'

在网页页面元素中你会发现,video.js给大家应用的flash目标了。

全自动播发:

给video元素再加autoplay特性,或在js中添加autoplay:true

 <video id="video" autoplay poster="/images/bk.png" width="375" height="200" controls preload="none" > </video>

      var player = videojs('video', { autoplay:true }, function () {
           console.log('Good to go!');
           //this.play(); // 商业保险你还能够积极启用play()
       });

全自动播发总令人反感,反之便是删掉autoplay特性或设定为false。

别的:

video.js适用拓展软件,用起来很便捷。

//界定1个软件
        function examplePlugin(options) {
            this.on('play', function (e) {
                console.log('playback has started!');
            });
        }
        //申请注册
        videojs.plugin('examplePlugin', examplePlugin);
        // 应用
        player.examplePlugin({ exampleOption: true });

软件內部能够立即启用播发器的api。 有1款playlist的软件能够科学研究下,如过你必须播发目录。https://github.com/brightcove/videojs-playlist  和 http://videojs.com/advanced/  有这样的实际效果:
 

总结

以上所述是网编给大伙儿详细介绍的HTML5视頻播发软件 video.js详细介绍 ,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!