HTML5学习笔记
——2014.08.11-2014.08.15
HTML5视频(续)
这一段是接着上周的学习内容而进行的。主要实在上周实践了HTML5 video元素后,一些理论知识的记述,和进一步的实践。
一、关键概念:
容器:视频(音频)文件本质是一个容器文件,盛装了音频轨道、视频轨道和其他一些元数据。上回我们提到的MPEG4,Ogg等都是视频容器的格式。
编解码器:本质上是一组算法,用于对音频和视频进行编解码,编码是为了使音视频文件在网络上可以较快的传输,与编码相对的就是解码。
二、HTML5的局限
1. 目前HTML5食品规范中还没有比特率切换标准,所以对视频的支持只限于加载全部媒体文件。
2. HTML5的媒体受到HTTP跨源资源共享的限制。
3. 全屏视频无法通过脚本控制
三、video的应用
上周所做的实验中IE8不能支持HTML5的video,因此出现了
通过在video元素中嵌入显示Flash视频的Object元素,可以解决这一问题。意思是如果浏览器支持HTML5 video那么就优先显示HTML5 video,Flash 视频作为后备。
代码如下:
<!DOCTYPEHTML>
<html>
<body>
<videosrc="movie.mp4" width="320" height="240"controls="controls">
<object data="videoplater.swf"type="application/x-shockwave-flash">
<param name="movie"value="video.swf"/>
</object>
Your browser doesnot support the video tag.
</video>
此时用IE8打开就会在提示前出现一个播放Flash视频的位置,如下图所示,因为电脑上并没有视频的文件,所以只会有一个白块。
下一步,嵌入video元素中的替代内容只有在浏览器不支持video元素时才显示。使用WebVTT,可以在视频中设置字幕等。效果如下图
红框圈出的就是字幕的控制,因为没有视频所以字母不会显示出来。
简单的VTT文件编写,如下所示
WEBVTT
1
00:00:01.000 --> 00:00:04.000
What do you think about HTML5 Video and WebVTT?
2
00:00:05.000 --> 00:00:10.000
I think it's great. I can't wait for the browsers to support it!
文件开头的第一行必须以单词WEBVTT开头,vtt文件以text/vtt的MIME类型标记。WEBVTT中还可以设置要显示文字的一些特征,使用时可以通过手册查询。
写好WEBVTT文件后,需要在video元素中添加<track>,<track>元素可以添加多个,指向不同的字幕。代码如下
<videosrc="movie.mp4" width="640" height="480"controls="controls">
<track src="subtitles_en.vtt"kind="subtitles" srclang="en" label="English">
<track src="subtitles_cn.vtt"kind="subtitles" srclang="cn" label="Chinese"default>
Yourbrowser does not support the video tag.
</video>
<track>的主要参数及左右如下
kind | 定义字幕内容类型,只能是这五种之一: subtitles, captions, descriptions, chapters, metadata. |
src | 字幕文件的URL地址 |
srclang | 字幕文件的语言类型,标识信息的作用,播放器不使用这个属性。 |
label | 字幕标签,每个字幕元素必需设置一个唯一不重复的标签,切换字幕时显示的名称。 |
default | 指定是否是默认字幕。如果每个都不指定,将不会自动显示字幕. |
前面所述都是Video元素的一些简单运用,video元素可以被HTML5 Canvas的函数调用,做出更为复杂的运用。这些复杂的运用会在学习到Canvas时再学习。
Html5 音频
这一段是学习HTML5的audio元素的记录。现在网页上的音频多数是通过插件来播放的,如果没有安装插件就会不能播放,不同的网页会有不同的插件,这就给使用者带来了很大的困扰。
一、HTML5 audio元素支持的格式
| IE9 | Fierfox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 |
Ogg Vorbis |
| 支持 | 支持 | 支持 |
|
MP3 | 支持 |
|
| 支持 | 支持 |
Wav |
| 支持 | 支持 |
| 支持 |
二、如何使用
audio与video类似,基本的结构是
<audio src=”” controls=” controls”>
浏览器不支持audio时要显示的信息
</audio>
具体代码如下
<!DOCTYPEHTML>
<html>
<body>
<audiosrc="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>
</body>
</html>
运行结果如下图
Chrome36.0运行结果
IE8.0运行结果
audio 与video类似,可以使用多个source,代码如下:
<!DOCTYPE HTML>
<html>
<body>
<audio controls="controls">
<sourcesrc="song.ogg" type="audio/ogg">
<sourcesrc="song.mp3" type="audio/mpeg">
Your browser does not supportthe audio tag.
</audio>
</body>
</html>
属性 | 值 | 描述 |
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
preload | preload | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的音频的 URL |