js视频播放器——video.js

js 手机 视频 js 兼容

视频播放器在不支持video标签就自动使用flash，达到兼容ie8效果：

http://videojs.com/getting-started/

https://sdeno.com/wp-content/uploads/2020/02/videojs.zip

自适应

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

开始，暂停，结束

<video  id="example_video_1" class="video-js vjs-big-play-centered vjs-default-skin" controls preload="none" data-setup="{}">

</video>
var player = videojs('video', {
         width:1000,//宽string|number
         height:450,//高：string|number
         controls:true,//控制条：boolean
         preload:"none",//预加载：string；'auto'|'true'|'metadata'|'none'
         poster:'source/suoluetu.jpg',//预览图：string
         autoplay:false,//自动播放：boolean
         loop:true,//循环：boolean
         muted:true,//静音：boolean
         sources:[
             {
                 src:'source/test.mp4',
                 type:'video/mp4'
             }
         ],
         controlBar: {
             muteToggle: false,
             volumeMenuButton:false//静音按钮
         }
 }, function () {
   console.log('Good to go!');
   //this.play(); // if you don't trust autoplay for some reason
   player.src('http://www.xx.com/1.mp4');  //动态加载视频
   this.on('ended',function(){
        //播放结束后回调
   });
 });
 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()) {
 // 播放结束
 }
});

iis 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才能生效。

设置默认使用html5还是flash技术优先级：

video.js默认会使用html5技术优先，但我们可以设置为flash优先，如：

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

或者

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

自动播放：

<video id="video" autoplay> </video>

或者

var player = videojs('video', { autoplay:true }, function () {
 console.log('Good to go!');
 //this.play(); // 保险你还可以主动调用play()
});

添加自定义方法：

//定义一个插件
        function examplePlugin(options) {
            this.on('play', function (e) {
                console.log('playback has started!');
            });
        }

        //注册
        videojs.plugin('examplePlugin', examplePlugin);
        // 使用
        player.examplePlugin({ exampleOption: true });

插件内部可以直接调用播放器的api。 有一款playlist的插件可以研究下，如过你需要播放列表。https://github.com/brightcove/videojs-playlist 以及 http://videojs.com/advanced/ 有这样的效果：

官方文档：

http://docs.videojs.com/docs

参考博客：

http://www.tuicool.com/articles/7jYvQrR

http://blog.videojs.com/Video-js-5-s-fluid-mode-and-playlist-picker/

Creating Intrinsic Ratios for Video

https://pan.baidu.com/s/1gfQuN0f