使用 video.js 开发 HTML5 视频页面

by Jon

使用 video.js 简单几步编写一个可以在微信、QQ内置浏览器中正常工作的 HTML5 视频播放器。

HTML5 <video> 标签看似简单，但在不同设备上使用时却问题不断，原因是很多设备强制使用自身的视频播放器来播放 HTML5 视频。使用第三方组件 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>

与官方教程相比，这里为 video 元素额外添加了 vjs-big-play-centered 类，让播放按钮显示在视频的正中间（默认在左上角）。controls 表示自动添加播放控件。加上 preload="auto" 可以让页面加载完成后立即开始加载视频，如果设置为 preload="meta" 则只加载视频元数据。

为适配不同内核的浏览器，需要同时提供 .mp4、.ogv、.webm 三种格式的视频，但 OS X 下没有找到好用的免费转换器可以同时转换成 .mp4、.ogv 和 .webm 三种格式。miro 虽然号称免费开源，但是不捐钱无法得到下载链接……如果视频不大，推荐使用 converter.com 的在线转换器。

在 <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 确保视频信息已加载成功 ，以免在页面刚刚加载的时候就错误地认为视频播放已经结束。

隐藏移动设备自动添加的播放按钮

移动设备上的浏览器检测到 HTML5 视频时，会自动加上播放按钮，然而在大多数情况下，默认的播放按钮点击之后并不能正常播放视频。（为什么要采用第三方组件来写视频控件的原因。）

另外，video.js 本身已经带有播放按钮，因此需要将设备自动添加的播放按钮隐藏。设置下面的 CSS 样式：

video::-webkit-media-controls {
    display:none !important;
}

到此为止，一个适配了桌面端与移动端，并用能在QQ、微信浏览器中正常打开视频的页面就完成了。

参考