videoJS如何用

发布时间:2017-7-1 11:20:00编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"videoJS如何用 ",主要涉及到videoJS如何用 方面的内容,对于videoJS如何用 感兴趣的同学可以参考一下。

一,Web视频播放器插件

一个好的播放器需要满足以下需求:
1. 支持所有主流浏览器(兼容性保障)
2. 用户能与播放器交互,播放器必须提供必要的API,比如播放,暂停,停止,拖动,倍速播放,片源切换
3. 可定制外观,方便后期扩展,UI定制化保障不同的用户自定义
4. 支持flv、mp3、mp4格式,支持播放列表
5. 详尽的帮助文档说明,方便开发者使用
 
二、播放器插件举例
1、videoJS:
   videojs是一个兼容html5的视频播放工具,早期版本兼容所有浏览器,方法是:提供三个后缀名的视频,并在不支持html5的浏览器下生成一个flash的版本。
最新的3.1.0版本优化了之前的做法,只需要提供两个格式的视频,页面制作起来更加方便,只有两步走:
1、引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站
  <link href=”http://vjs.zencdn.net/c/video-js.css” rel=”stylesheet”>
  <script src=”http://vjs.zencdn.net/c/video.js”></script>
2、页面中使用方式:
(1)直接在HTML中设置属性
  <video id=”my_video_1″ class=”video-js vjs-default-skin” controls preload=”auto” width=”640″ height=”264″ poster=”my_video_poster.png” data-setup=”{}”>
    <source src=”my_video.mp4″ type=’video/mp4′>
    <source src=”my_video.webm” type=’video/webm’>
  </video>
其中poster就是视频的缩略图,那俩source一个指向mp4视频,一个指向webm视频,在页面加载过程中,video.js会判断浏览器支持哪个格式视频,会自动加载可播放的视频。
(2)通过API设置视频:
<video id="videoID"></video>

  var player = videojs('videoID',{
    controls: true,  //控制条
    preload: 'none', //是否自动加载
    width: '640',
    height: '264',
    poster: 'media/poster.jpg',
    sources: [
      {src: 'media/001.mp4',type: 'video/mp4'}
    ]
  },function(){
    var that = this;
    that.on('pause',function(){
      old_time = this.currentTime();
      console.log('pause:' + old_time);
    })
    that.on('play',function(){
      new_time = this.currentTime();
       console.log('playing:' + this.currentTime());
    })
    that.on('seeked',function(){
      new_time = this.currentTime();
      console.log('seeked:' + this.currentTime());
      if (old_time) {
        console.log(new_time > old_time ? '拖动快进' : '拖动后退');
      }
    })
    that.on('ended',function(){
      console.log('ended:'+ this.currentTime());
      console.log('duration:' + this.duration());
    })
  })


上一篇:eggjs 框架代理调试 SELF_SIGNED_CERT_IN_CHAIN 报错解决方案
下一篇:Linux——互联网搜索引擎nbtscan是一个扫描WINDOWS网络NetBIOS信息的小工具

相关文章

关键词: videoJS如何用

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款