如何使用videojs的api

JavaScript06

如何使用videojs的api,第1张

 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、页面中加入一个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会判断浏览器支持哪个格式视频,会自动加载可播放的视频。

简单吧

该方式使用以创建好的video标签,只是简单的改变video的src。注意,此时的自定义组件(如清晰度)并没有更新,里面的数据还是上一个视频的信息,需要手动更新,可以手动移除后再添加。

该方式首先会调用dispose方法销毁已经创建的video标签,并移除所有的组件和监听事件,然后需要自己创建video并设置其id(注意该id不能与之前销毁的id相同,我也不知道为啥~ :) )和class以及src,然后将创建的video添加到文档中,如上html的结构,将作为id= vWrap的子元素添加到文档中。

一开始在项目中使用dplayer做为视频的播放库,但是由于在孤儿浏览器上出现兼容问题