除非你一直生活在一个偏远的岛屿上,过去一年左右的时间,你应该已经听说过HTML5的各式炒作。HTML5将重塑富Web应用的未来。
下面 Figure 1的示例展示了HTML5中video标签与传统的object标签的不同.
Figure 1
1. <section>
2. <h1>使用HTML5的video标签播放视频</h1>
3. <videosrc="video1.mp4">
4. </video>
5. </section>
6. <section>
7. <h1>使用Flash插件播放视频</h1>
8. <objecttype="application/x-shockwave-flash"
9. data="player.swf"width="290"height="24">
10. <paramname="movie"value="player.swf">
11. </object>
12.</section>
那么重要的是什么呢? 这两个示例很简单,也易于实现。因为<视频>标记是一个用来播放媒体的标准, 你不必猜测浏览器是否要安装特定的某个版本插件。这个标准正是HTML之前最为缺少的那部分。
HTML5支持的媒体格式
HTML5支持AAC, MP3 和 Ogg Vorbis三种音频格式，以及Ogg Theora, WebM 和MPEG-4三种视频格式.
但并不是所有浏览器都支持所有的格式。如下表：
Figure 2浏览器支持的媒体格式
浏览器 |
视频格式 |
音频格式 |
||||
|
Ogg Theora |
H.264 |
VP8 (WebM) |
Ogg Vorbis |
MP3 |
Wav |
Internet Explorer |
手动安装 |
9.0 |
手动安装 |
No |
Yes |
No |
Mozilla Firefox |
3.5 |
No |
4.0 |
Yes |
No |
Yes |
Google Chrome |
3.0 |
No |
6.0 |
Yes |
Yes |
Yes |
Safari |
手动安装 |
3 |
手动安装 |
No |
Yes |
Yes |
Opera |
10.50 |
No |
10.60 |
Yes |
No |
Yes |
使用视频标签<video>
在HTML5中播放视频，直接使用<video>标签就可以了, 如下所示:
1. <videosrc="video.mp4"controls/>
src属性 (https://www.w3.org/TR/2011/WD-html5-20110113/video.html#the-source-element) 设备要播放视频的名称(可以多个), control的布尔值用来调整是否显示播放控制栏. 完整的属性列表如下所示:
Figure 3视频相关的属怀
属性 |
值 |
描述 |
Muted |
Muted |
定义的音频的初始状态.目前仅支持muted. |
Crossorigin |
定义当前视频是否是一个跨域的项目. |
|
Mediagroup |
ID |
将多个视频或音频集合在一起，并结合MediaController实现同步控制. |
Autoplay |
Autoplay |
如果指定，视频会在准备好(如已取得可播放视频)后自动播放. |
Controls |
Controls |
添加播放控制及音量控制功能栏. |
Height |
Pixels |
指定播放器的高度，以pixel为单位. |
Loop |
Loop |
如果指定，视频将重复播放. |
Poster |
url |
指定视频的预览图. |
Preload |
Preload |
如果指定，视频会在加页面加载过程中被加载。当Autoplay被指定时，会被忽略。 |
Src |
url |
目标视频的URL. |
Width |
Pixels |
指定播放器的宽度，以pixel为单位. |
下面是一使用了多个属性的示例，也包括一个备用(fallback)的错误信息(当浏览器不支持video标签时显示).
1. <videosrc="video.mp4"width="320"height="240"autoplaycontrolsloop>
2. Your browser does not support the video tag.
3. </video>
你也可以使用MIME指定视频的编码格式，如下：
1. <!-- H.264 Constrained baseline profile video (main and extended video compatible)
2. level 3 and Low-Complexity AAC audio in MP4 container -->
3. <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
4. <!-- H.264 Extended profile video (baseline-compatible) level3 and Low-Complexity
5. AAC audioin MP4 container -->
6. <source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
你也可使用JavaScript来设定这些属性. 如下面的代码示例:
<!—显示控制栏的三种方式-->
<videocontrols>
<videocontrols="">
<videocontrols="controls">
// JavaScript中显示控制栏的两种方式
video.controls = true;
video.setAttribute
('controls',
'controls');
如果无法确定目标浏览器是否能支持<video>或者你的视频格式，你最好指定一个回退的信息，以告诉用户为什么没有到期望的内容。如下所示：
1. <videocontrols>
2. <sourcesrc="video1.mp4"/>
3. <sourcesrc="video1.ogv"/>
4. <sourcesrc="video1.webm"/>
5. <p>This browser does not support HTML5 video</p>
6. </video>
如果你要确保视频可以被播放，你可以按照以前的方式加入一个flash的object标签,如下：
1. <videocontrols>
2. <sourcesrc="video1.mp4"/>
3. <sourcesrc="video1.ogv"/>
4. <sourcesrc="video1.webm"/>
5. <objectdata="videoplayer.swf">
6. <paramname="flashvars"value="video1.mp4">
7. 您的浏览器对HTML5 Video 和 Flash 都不支持
8. </object>
9. </video>
也可以在JavaScript中使用canPlayType来检测浏览器是否可以播放某个格式的视频：
1. var video = document.getElementsByTagName('video')[0];
2. if (video.canPlayType)
3. { //支持video标签
4. if (video.canPlayType('video/ogg; codecs="theora, vorbis"'))
5. { // it may be able to play
}
6. else
7. {// the codecs or container are not supported
8. fallback(video);
9. }
10. }
如果希望有更明确清晰的提示，可以使用onerror事件监听器来报告一个错误：
1. <video src="video.mp4"
2. onerror="fallback(this)">
3. 不支持<video>
4. </video>
使用poster,你可以在video播放区域显示一张图片来替代，它可以用来显示视频的预览图。下面是一个示例:
1. <video src="video1.mp4" poster="preview.jpg"</video>
最后，使用JavaScript和HTML,你就可以创建一个交互性的视频播放器。Figure 4 展示如何使用JavaScript添加一个video并响应用户的控制操作.(译注:比如Youtue就是采用动态创建video控件的方式来提供视频播放功能的。)
Figure 4 JavaScript对视频的控制
1. var video = document.createElement('video');
2. video.src ='video1.mp4';
3. video.controls =true;
4. document.body.appendChild(video);
5. var video = new Video();
6. video.src ='video1.mp4';
7. var video = new Video('video1.mp4')
8. <script>
9. var video = document.getElementsByTagName('video')[0];
10. </script>
11. <inputtype="button"value="Play"onclick="video.play()">
12. <inputtype="button"value="Pause"onclick="video.pause()">
完整的事件和特性列表，参考https://www.w3.org/TR/2011/WD-html5-20110113/video.html#playing-the-media-resource.
译注: 作者的代码可能会让你有些疑问。看的时候，要注意分辨作者可能是使用多种方式来实现同一个功能。以最后一个代码为例，其中5~7行是1~2行的另两种写法。
以下是一份动态加入video元件，并可以控制静音的功能示例:
*muteVideo是静音状态切换函数
*playVideo函数在没有video控件时会添加一个控件，如果已经存在就播放。
function addSourceToVideo(element,src,type)
{
var source = document.createElement('source');
source.src = src;
source.type= type;
element.appendChild(source);
}
function insertVideo(src,type,width,height)
{
var vid = document.createElement("video");
vid.controls="controls";
vid.width = width;
vid.height=height;
vid.id = "video_control";
vid.muted= false;
addSourceToVideo(vid,src,type);
document.getElementById("show").appendChild(vid);
}
function muteVideo()
{
var vid = document.getElementById("video_control");
if(vid == undefined)
return;
if (vid.muted==undefined || !vid.muted)
{
vid.muted = true;
}
else
{
vid.muted = false;
}
}
function playVideo()
{
var video = document.getElementById("video_control");
if(video==undefined)
{
insertVideo("files/happyfit2.mp4","video/mp4",604,256);
video = document.getElementById("video_control");
}
video.play();
}
原文地址:Working with Media in HTML5
作者:Jason Beres
转载请注明出处:http://blog.csdn.net/horkychen
