videojs中文文档详解

入门使用

引入video.js和video-js.css

<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>

使用video标签就像下面这样：

  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
         poster="http://vjs.zencdn.net/v/oceans.png">
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
  </video>

videojs使用方式就是以类似的方式开始的，不过由于我们借助videojs对视频进行一些控制或制定

var player = videojs('example_video_1',{
    muted: true,
controls : true/false,      
height:300, 
width:300,
loop : true,
// 更多配置.....
});

常用事件

播放 this.play()

停止 – video没有stop方法，可以用pause 暂停获得同样的效果

暂停 this.pause()

销毁 this.dispose()

监听 this.on(‘click‘,fn)

触发事件this.trigger(‘dispose‘)

var options = {};

 

var player = videojs(‘example_video_1‘, options, function onPlayerReady() {
  videojs.log(‘播放器已经准备好了!‘);
 
  // In this context, `this` is the player that was created by Video.js.<br>  // 注意，这个地方的上下文， `this` 指向的是Video.js的实例对像player
  this.play();
 
  // How about an event listener?<br>  // 如何使用事件监听？
  this.on(‘ended‘, function() {
    videojs.log(‘播放结束了!‘);
  });
});

videojs('my-player', {
  sources: [{
    src: '//path/to/video.mp4',
    type: 'video/mp4'
  }, {
    src: '//path/to/video.webm',
    type: 'video/webm'
  }]
});

<video ...>
  <source src="//path/to/video.mp4" type="video/mp4">
  <source src="//path/to/video.webm" type="video/webm">
</video>

查看更多关于videojs中文文档详解的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did25076