时间 2015-05-13 17:11:58
The GIS Guy
The GIS Guy
使用 video.js 简单几步编写一个可以在微信、QQ内置浏览器中正常工作的 HTML5 视频播放器。
HTML5 标签看似简单，但在不同设备上使用时却问题不断，原因是很多设备强制使用自身的视频播放器来播放 HTML5 视频。使用第三方组件 video.js 可以在一定程度上克服这个问题。
初始化 video.js
编写 HTML 页面：
<<span class="hljs-name">head>
<<span class="hljs-name">meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<<span class="hljs-name">title></<span class="hljs-name">title>
<<span class="hljs-name">link href="include/video-js/video-js.css" rel="stylesheet">
<<span class="hljs-name">script src="video.js"></<span class="hljs-name">script>
<<span class="hljs-name">script>
videojs.options.flash.swf = "include/video-js/video-js.swf"
</<span class="hljs-name">script>
</<span class="hljs-name">head>
<<span class="hljs-name">body>
<<span class="hljs-name">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=''>
<<span class="hljs-name">source src="video/video.mp4" type='video/mp4' />
<<span class="hljs-name">source src="video/video.webm" type='video/webm' />
<<span class="hljs-name">source src="video/video.ogv" type='video/ogg' />
<<span class="hljs-name">p class="vjs-no-js">播放视频需要启用 JavaScript，推荐使用支持HTML5的浏览器访问。</<span class="hljs-name">p>
</<span class="hljs-name">video>
</<span class="hljs-name">body>
与官方教程相比，这里为 video 元素额外添加了 vjs-big-play-centered 类，让播放按钮显示在视频的正中间（默认在左上角）。 controls 表示自动添加播放控件。加上 preload="auto" 可以让页面加载完成后立即开始加载视频，如果设置为 preload="meta" 则只加载视频元数据。
在
中声明 ，可以让页面在高分辨率的手机上显示正确的尺寸，防止因为屏幕像素高而使得页面元素变得很小。
虽然页面中已经指定 高度为100%，但此时视频控件高度仍然为0，可以用下面的 CSS 样式让视频控件全屏。
html, body {
width: 100%;
height: 100%;
}
为适配不同内核的浏览器，需要同时提供 .mp4、.ogv、.webm 三种格式的视频，但 OS X 下没有找到好用的免费转换器可以同时转换成 .mp4、.ogv 和 .webm 三种格式。miro 虽然号称免费开源，但是不捐钱无法得到下载链接……如果视频不大，推荐使用 converter.com 的在线转换器。
可以看看上面代码在浏览器中的效果：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/114239.html原文链接：https://javaforall.net
