除非你一直生活在一个偏远的岛屿上,过去一年左右的时间,你应该已经听说过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属性 (http://www.w3.org/TR/html5/video.html#the-source-element) 设备要播放视频的名称(可以多个), control的布尔值用来调整是否显示播放控制栏. 完整的属性列表如下所示:
Figure 3视频相关的属怀
属性
|
值
|
描述
|
Audio
|
Muted
|
定义的音频的初始状态.目前仅支持muted.
|
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"autoplaycontrols
loop>
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 4JavaScript对视频的控制
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()">
完整的事件和特性列表,参考http://www.w3.org/TR/html5/video.html#playing-the-media-resource.
译注: 作者的代码可能会让你有些疑问。看的时候,要注意分辨作者可能是使用多种方式来实现同一个功能。以最后一个代码为例,其中5~7行是1~2行的另两种写法。
原文地址:Working with Media in HTML5
作者:Jason Beres
转载请注明出处:http://blog.csdn.net/horkychen
分享到:
相关推荐
video-js-html5视频播放器源码例子
正版视频转换x-video-converter-ultimate.part2 支持各种视频转换,包括高清格式
将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签、以及HTML5提供的对JavascriptAPI的扩展。
html5 video视频,多平台支持,html5播放器videojs案例,手机端视频播放
1.实现播放、暂停视频; 2.视频全屏、小屏播放视频 3.实现视频进度条 4.切换视频 使用说明: 下载代码之后:npm install,然后npm start,然后npm link 安装包(react-native link react-native-orientation,...
无需注册的xilisoft-video-converter-ultimate全能视频音频转换软件,
video-js(视频播放器插件),很好的视频播放器插件,兼容性好,集成简单。
ckeditor-html5-video是CKEditor的简单HTML5视频插件,是转换版本。 如果要手动添加插件,则需要: 将html5video文件夹解压缩到CKEditor安装的plugins文件夹中。 例子: ...
此demo是一个用video.js封装的播放组件—vue-video-player。用于前端播放本地或链接地址视频。
quill-video-image-module 介绍 quill视频上传,图片上传到服务器模块,用video标签替换iframe 安装教程 cnpm i vue-quill-editor cnpm i quill cnpm i quill-video-image-module 使用说明 import 'quill/dist/...
视频编辑分割格式改小软件RD-Video-Editor_63.exe 视频编辑,视频分割,视频格式改小,视频编辑软件,RD-Video-Editor
网页放置视频播放器,我一般都是用video.js和它的插件vue-video-player 一:Video.js 需求:对于简单的视频播放需求来说,video.js足以胜任了。 它可是支持HTML5和Flash的视频播放器呦。 1:安装video.js npm ...
jQuery-video-视频播放 找的更少,作的更多! jQuery插件库只为您提供最好的! 找的更少,作的更多! jQuery插件库只为您提供最好的!
Easy HTML5 Video可用来将各种视频格式转换为HTML5格式。软件采用向导式界面,帮助你快速转换视频,并生成嵌入到网站的代码,所有这些通常只需点击几次鼠标即可完成。可以利用基于jquery的jplayer来播放转换后的视频
[data-video-play-when-in-view] 仅在视频在视口中时播放 [data-video-preload] 开始播放前预加载 [data-video-fade-in] 应用淡入效果 [data-video-bind-scroll] 绑定窗口滚动和视频搜索 [data-video-volume] 设置...
网页 video-js-html5视频播放器源码兼容所有浏览器例子,下载DEMO完美
ckeditor4 视频插件html5-video功能增强,添加中文显示,新增添加封面的功能。内有用法示例,请丢在服务器里预览效果。
web、移动开发、 HTML5 视频播放器 video-jsHTML5 视频播放器 video-js
1.1.1 视频通信发展趋势 1.1 视频通信发展趋势 EBG 1.2.1 视频会议应用模型&体系架构&产品 1.2 视频会议体系介绍 EBG 1.2.2 视频会议产品&技术特点 1.2 视频会议体系介绍 EBG 1.3.1 视频会议应用 1.3 视频会议应用 ...
这是一个完整的html5-video,下载,解压后可以立刻播放,里面的html5代码,js代码都是完整的!