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());
　　　　})
　　})

转载于:https://www.cnblogs.com/zhang134you/p/7081036.html