登录  /  注册
首页 > web前端 > H5教程 > 正文

H5的视频播放库video.js详解

php中世界最好的语言
发布: 2018-03-16 14:26:22
原创
8849人浏览过

这次给大家带来H5的视频播放库video.js详解,使用H5的视频播放库video.js的注意事项有哪些,下面就是实战案例,一起来看一下。

video.js是一款很流行的html5视频播放插件。很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8。官网:http://videojs.com/    git&demo  :http://files.cnblogs.com/files/stoneniqiu/video-js-5.11.4.zip

看下默认例子:

    <title>Video.js | HTML5 Video Player</title>
    <link>
    <script></script>
    <script></script>
  <video>
    <source>
    <source>
    <source>
    <track></track>
    <!-- Tracks need an ending tag thanks to IE9 -->
    <track></track>
    <!-- Tracks need an ending tag thanks to IE9 -->
    <p>To view this video please enable JavaScript, and consider upgrading to a web browser that <a>supports HTML5 video</a></p>
  </source></source></source></video>
登录后复制

View Code

controls表示控制条,prload:预加载,poster表示最初的显示的图片。data-set支持用json来设置一些参数。source不用说了,track指的是字幕。

 这样子就出来了,但是在实际中我们还有其他需求。

不要字幕:

需要应用novtt的js,在demo的alt文件中。这样视频控制条中就不会出现字母的选择。当然你不再需要页面中的track元素了。

<link><script></script>
登录后复制

宽高自适应:

开始用css自己设置,发现怎么都没有效果。视频元素不同于一般的元素,需要通过设置内在元素的比率来做到响应式的宽高。video.js提供了两种方式。

js:设置一个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元素设置一个起始的宽高,不然开始的图片看不见。

css:可以直接添加样式。有三种 .vjs-fluid,.vjs-4-3,.vjs-16-9 第一种它会自动计算,后面两种指定比率。 样式也需要设置起始宽高才能显示图片

 <video>
        <source>
        <p>  播放视频需要启用 JavaScript,推荐使用<a>支持HTML5</a>的浏览器访问。</p>
    </source></video>
登录后复制

事件关注:

我们一般关注开始,暂停,结束这三个事件

    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 &amp;&amp; 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才能生效。

样式自定义

 官方给了一个codepen的地址 http://codepen.io/heff/pen/EarCt 可以编辑玩玩。 主要是播放按钮,控制条和进度条。默认就是上面那样。

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

Flash设置

Playback技术用来在浏览器或插件中播放视频或音频文件,如果是h5会使用video或audio元素,如果是flash,会定义一个flash播放器。不止flash,还支持Silverlight、Quicktime等技术播放。可以在元素中直接定义data-setup。指定支持的技术。

<video><p style="text-align: left;">或者<a href="http://www.php.cn/code/7565.html" target="_blank">使用JavaScript</a>:</p>
<pre class="brush:php;toolbar:false">videojs("videoID", {
  techOrder: ["html5", "flash", "other supported tech"]
});
登录后复制

这里默认的规则是,会用第一项技术去播放,不行再使用后面的选项。比如上方html5写在第一位,就会用html5播放所有的视频。如果我们想flash优先,放在前面即可:

 data-setup='{ "techOrder": ["flash","html5"] }'
登录后复制

在页面元素中你会发现,video.js给我们使用的flash对象了。

自动播放:

给video元素加上autoplay属性,或者在js中加入autoplay:true 

 <video> </video>
登录后复制

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

自动播放总让人讨厌,反之就是删除autoplay属性或设置为false。

其他:

video.js支持扩展插件,用起来很方便。

       //定义一个插件
        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/  有这样的效果:

用qq影音转码比较方便,比起什么格式工厂。H.264

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

JS里特别好用的轻量级日期插件

公众号支付接口的开发

以上就是H5的视频播放库video.js详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号