H5视频播放插件video.js使用方法及注意事项

最近一个项目需要用h5的视频和app原生视频交互，在app内点击小窗口播放的时候调用H5的视频，点击全屏之后调用原生的视频播放并同步播放时间，点击关闭全屏之后继续调用h5浏览器并同步播放时间。刚开始做的时候准备用js原生的方法写，后面发现样式比较难跟UI保持一致于是就用了video.js插件
videojs就提供了这样一套解决方案，他是一个兼容html5的视频播放工具，早期版本兼容所有浏览器，方法是：提供三个后缀名的视频，并在不支持html5的浏览器下生成一个flash的版本。

最新的3.1.0版本优化了之前的做法，只需要提供两个格式的视频，页面制作起来更加方便，只有两步走：
　　1、引用脚本，videojs很为你着想，直接cdn了，你都不需要下载这些代码放入自己的网站
　　　　
　　　　
　　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=”{}”>
　　　　
　　　　
　　　　
　　其中post就是视频的缩略图，那俩source一个指向mp4视频，一个指向webm视频，在页面加载过程中，video.js会判断浏览器支持哪个格式视频，会自动加载可播放的视频。
简单吧！
video.js API
进阶：使用api

获取对象：
　　　　var myPlayer = V(“my_video_1″);
　　后面那个就是就是video标签的id值，这是myPlayer就是播放器对象了。

播放：
　　　　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();

添加事件
　　　　var myFunc = function(){
　　　　　　// Do something when the event is fired
　　　　};
　　　　myPlayer.addEvent(“eventName”, myFunc);
　　删除事件
　　　　myPlayer.removeEvent(“eventName”, myFunc);
设置播放语言
API支持通过addLanguage方法手动定义新语言。其需要两个参数 标准语言代码, 语言定义对象：
videojs.addLanguage(‘es’, {
Play: ‘Reproducción’,
Pause: ‘Pausa’,
‘Current Time’: ‘Tiempo reproducido’,
‘Duration Time’: ‘Duración total’,
‘Remaining Time’: ‘Tiempo restante’,
…
});
如果对象包含以前翻译过的字符串，addLanguage()将覆盖现有的翻译。然而，已经本地化的文本将不会在生成之后更新
遇到的问题
1、 ios下面点击播放的时候直接全屏播放了，在Android下正常小窗口播放点击全屏之后才全屏播放
2、设置当前播放时间
3、视频封面自适应视频大小
4、data-setup必须要写，该属性必须有个值{}
解决方法后续更新