HTML5的在线视频播放方案

HTML5的视频播放控制技术

内容提要：介绍了HTML5的video元素和常用属性，以及视频播放控制技术，如播放、暂停、音量、全屏、回放功能的实现。

近年来,网络视频和音频变得越来越流行,YouTube,Viddler等网站的视频服务使人更容易发布视频和音频。然而,由于 HTML目前缺乏必要手段成功地嵌入和控制多媒体本身,许多网站都依赖Flash提供该功能。虽然可以嵌入多媒体使用各种插件(如QuickTime,Windows媒体等等),Flash是目前唯一被广泛部署插件,它为开发人员提供了一个跨浏览器兼容的解决方案。

HTML5的video和 audio元素使视频播放控制更容易，大部分的api两个元素之间共享。

当前，video 元素支持三种视频格式：
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

技术分享

HTML5的视频播放，最简单的方法是使用嵌入视频 video元素

controls属性供添加播放、暂停和音量、全屏控制控件。
再加上宽度和高度属性width="300" height="240" 和autoplay属性，视频在就绪后马上播放。

提示：可以先修改部分代码后再运行上面代码

html5中视频控制属性：

Autoplay	Autoplay	如果指定，视频会在准备好(如已取得可播放视频)后自动播放.
Controls	Controls	添加播放控制及音量控制功能栏.
Height	Pixels	指定播放器的高度，以pixel为单位.
Loop	Loop	如果指定，视频将重复播放.
Poster	url	指定视频的预览图.
Preload	Preload	如果指定，视频会在加页面加载过程中被加载。当Autoplay被指定时，会被忽略。
Src	url	目标视频的URL.
Width	Pixels	指定播放器的宽度，以pixel为单位.

当浏览器不支持video标签时（请查看：有哪些浏览器支持HTML5？）显示提示信息。

<video src="video.mp4"width="320"height="240"autoplay controls loop>
你的浏览器不支持HTML5，太落后了！！
</video>

如果无法确定目标浏览器是否能支持<video>或者你的视频格式，我们可以提供多个格式的视频文件，并给用户友好的提示。如下所示：

<videocontrols>
     <sourcesrc="video1.mp4"/>
     <sourcesrc="video1.ogv"/>
     <sourcesrc="video1.webm"/>
     <p>你的浏览器不支持HTML5 视频</p>
</video>

在上面的代码中我们提供了3种格式视频，浏览器将使用第一个可识别的格式。

poster属性可用于指定一个图像在视频开始播放前显示。

提示：可以先修改部分代码后再运行上面代码

API提供了一些方法和事件让脚本控制媒体的播放。最简单的方法来使用 play(), pause()、设置 currentTime 播放的时间。

实现代码：

<video id="video" src="mov.mp4" controls width="300" height="240" autoplay>
</video>
<script>
var video = document.getElementById("video");
</script>
<p>
<button type="button" onclick="video.play();">播放</button>
<button type="button" onclick="video.pause();">‖暂停</button>
<button type="button" onclick="video.currentTime = 0;">》回放</button>

HTML5的在线视频播放方案

移动端H5音频与视频问题及解决方案

浅谈基于HTML5的在线视频播放方案_html5教程技巧

HTML5的视频播放控制技术

html5中视频控制属性：

poster属性可用于指定一个图像在视频开始播放前显示。