一款全兼容的播放器 videojs

叁歲伎倆 2022-07-27 16:35 143阅读 0赞

# 一款全兼容的播放器 videojs #

\[官网\][http://www.videojs.com/][http_www.videojs.com]

videojs就提供了这样一套解决方案，他是一个兼容html5的视频播放工具，早期版本兼容所有浏览器，方法是：提供三个后缀名的视频，并在不支持html5的浏览器下生成一个flash的版本。

最新的版本  
[下载-5.8.0-releases版本][-5.8.0-releases]

## 目录结构 ##

video.js/
    ├── alt
    │   ├── video.novtt.js
    │   ├── video.novtt.min.js
    │   └── video.novtt.min.js.map
    ├── examples/
    ├── font
    │   ├── VideoJS.eot
    │   ├── VideoJS.svg
    │   ├── VideoJS.ttf
    │   └── VideoJS.woff
    ├── ie8
    │   ├── videojs-ie8.js
    │   └── videojs-ie8.min.js
    ├── lang/
    ├── video-js-5.8.0.zip
    ├── video-js.css
    ├── video-js.min.css
    ├── video-js.swf
    ├── video.js
    ├── video.js.map
    ├── video.min.js
    └── video.min.js.map

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.  如果需要支持IE8，这个js可以自动生成flash
    
        
        <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
3.  页面中加入一个html5的video标签
    
        <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>

其中post就是视频的缩略图，那俩source一个指向mp4视频，一个指向webm视频，在页面加载过程中，video.js会判断浏览器支持哪个格式视频，会自动加载可播放的视频。  
简单吧！

## 进阶：使用api ##

获取对象：  
后面那个就是就是video标签的id值，这是myPlayer就是播放器对象了。

videojs("my-video").ready(function(){
        window.myPlayer = this;
        // EXAMPLE: Start playing the video.
        myPlayer.play();
    });

## 方法： ##

获取对象

var videoObj = videojs(“videoId”);

ready:

myPlayer.ready(function(){
        //在回调函数中，this代表当前播放器，
        //可以调用方法，也可以绑定事件。
    })

播放：

myPlayer.play();

暂停：

myPlayer.pause();

获取播放进度：

var whereYouAt = myPlayer.currentTime();

设置播放进度：

myPlayer.currentTime(120);

视频持续时间，加载完成视频才可以知道视频时长，且在flash情况下无效

var howLongIsThis = myPlayer.duration();

缓冲，就是返回下载了多少

var whatHasBeenBuffered = myPlayer.buffered();

百分比的缓冲

var howMuchIsDownloaded = myPlayer.bufferedPercent();

声音大小（0-1之间）

var howLoudIsIt = myPlayer.volume();

设置声音大小

myPlayer.volume(0.5);

取得视频的宽度

var howWideIsIt = myPlayer.width();

设置宽度：

myPlayer.width(640);

获取高度

var howTallIsIt = myPlayer.height();

设置高度：

myPlayer.height(480);

一步到位的设置大小：

myPlayer.size(640,480);

全屏

myPlayer.enterFullScreen();

离开全屏

myPlayer.enterFullScreen();

## 添加事件 ##

durationchange
    ended //播放结束
    firstplay
    fullscreenchange
    loadedalldata
    loadeddata
    loadedmetadata
    loadstart
    pause //暂停
    play  //播放
    progress
    seeked
    seeking
    timeupdate
    volumechange
    waiting
    resize inherited
    
    var myFunc = function(){
    // Do something when the event is fired
    };

## 事件绑定 ##

myPlayer.on("ended", function(){
        console.log("end", this.currentTime());
    });
    myPlayer.on("pause", function(){
        console.log("pause")
    });

删除事件

myPlayer.removeEvent(“eventName”, myFunc);

虽然文章说明在不支持html5的情况下，会以flash播放，但在支持html5的firefox下播放mp4时，却遇到很大的困难，虽然调用了flash，但一直无法播放（不过我也一直怀疑我的firefox下的flash有问题，不知道是不是真的）。不过如果你听从videojs的建议，放两个格式的视频，就不会有这个问题了。

另外video的写法中还有专门针对flash的写法，当然你也可以用这个插件实现纯粹的flash播放（只写flash那部分就好，可以保证统一的浏览效果，不过ios的浏览器不兼容flash，这就要你自己进行判断来处理

[一个播放器demo][demo]

[http_www.videojs.com]: http://www.videojs.com/
[-5.8.0-releases]: https://github.com/videojs/video.js/releases
[demo]: http://jsbin.com/zubohijuxi/1/edit?html,output