Video.js
初始化video.js
编写HTML页面：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title></title>
<link href="include/video-js/video-js.css" rel="stylesheet">
<script src="video.js"></script>
<script> videojs.options.flash.swf = "include/video-js/video-js.swf" </script>
</head>
<body>
<video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="100%" height="100%" poster="img/pure-black.jpg" data-setup=''> <source src="video/video.mp4" type='video/mp4' />
<source src="video/video.webm" type='video/webm' />
<source src="video/video.ogv" type='video/ogg' />
<p class="vjs-no-js">播放视频需要启用 JavaScript，推荐使用支持HTML5的浏览器访问。</p> </video>
</body>
在 <head>中声明
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> ，可以让页面在高分辨率的手机上显示正确的尺寸，防止因为屏幕像素高而使得页面元素变得很小。
虽然页面中已经指定 <video> 高度为100%，但此时视频控件高度仍然为0，可以用下面的 CSS 样式让视频控件全屏。
html, body { width: 100%; height: 100%; }
事件响应
video.js 对 HTML5 视频的事件进行了封装，下面的代码演示了如何给视频添加事件响应：
var player = videojs('video'); // 检测播放时间
player.on('timeupdate', function () {
console.log('当前播放时间：' = player.currentTime());
}
}); // 开始或恢复播放
player.on('play', function() {
console.log('开始/恢复播放');
}); // 暂停播放
player.on('pause', function() {
console.log('暂停播放');
});
视频播放控件最常用的事件是 'play'，'pause'，'ended'，以及'timeupdate'。
适配iOS、安卓设备
正确处理播放结束事件
在设备实测中可以发现，上一节中提到的 'ended' 事件在安卓设备上并没有正确触发。因此，需要通过 'timeupdate' 事件判断视频是否已播放完毕：
player.on('timeupdate', function () {
// 如果 currentTime() === duration()，则视频已播放完毕
if (player.duration() != 0 && player.currentTime() === player.duration()) {
// 播放结束 }
});
与iOS设备不同，安卓设备中视频还未加载的情况下 player.duration() 与 player.currentTime() 均为0，因此需要通过 player.duration() != 0 确保视频信息已加载成功 ，以免在页面刚刚加载的时候就错误地认为视频播放已经结束。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
