《HTML5与CSS3基础教程(第8版)》 第17章读书笔记
(p350 - 358)
格式: H5支持3种视频文件格式:(p350 - 351)
格式 | 拓展名 | 浏览器支持 |
---|---|---|
Ogg Theora | .ogv | Firefox 3.5+、Chrome 4+、Opera 10.5+、Android Firefox |
MP4(H.264) | .mp4, .m4v | Safari 3.2+、Chrome 4-?、IE9+、IOS Safari、 Android2.1+、Android Chrome/Firefox/Opera 11+ |
WebM | .webm | Firefox 4+、Chrome 6+、Opera 10.6+、Android2.3+、Android Chrome/Firefox/Opera 14 |
- 开发者至少需要为视频提供2中格式(MP4和WebM),才能确保获得所有兼容H5的浏览器支持。
- 如果用户的机器上面安装了WebM,那么WebM在IE9+或Safari中可以正常运行。
video元素加载视频:
<video src="vidoe-url">video>
video元素属性: (p352)
属性 | 描述 |
---|---|
src | 指定视频文件的URL |
autoplay | 当视频可以播放时立即开始播放(自动播放) |
controls | 添加浏览器为视频设置的默认控件 |
muted | 让视频静音 |
loop | 让视频循环播放 |
poster | 指定视频加载时要显示的图像。接受所需图像的URL |
width | 视频的宽度,通常默认为300px |
height | 视频的高度,通常默认为150px |
preload | 预加载,告诉浏览器要加载的视频内容的多少。可以取值none/metadata/auto(默认) |
如果没有设置宽高,则浏览器会计算视频的尺寸,并在加载文件后根据尺寸显示视频。若设置的尺寸与视频不符,浏览器会对视频进行缩放,并尽可能保证质量。(p351)
如果没有指定controls属性,就不可以通过浏览器操控视频的播放,只能是默认的播放方法;若也没有设置
autoplay
和poster
,则视频会停在第一帧且没有播放、暂停等按钮(即不能播放)若设置了autoplay
和loop
,没有control则不能停下视频。不同浏览器的controls控件是不同的,见p353.(Firefox的控件显示的视频时长会比其他浏览器长1秒,音频也是)
如果没有设置poster属性, 视频加载时显示的图像则是视频的第一帧,设置后显示的是poster的url值的图片。
preload可以取3个值:
- none:表示不加载任何视频(若认为用户观看视频的可能性比较低,或不是主页内容时,可以不预加载该视频,或使用metadata);
- metadata:表示仅加载视频元数据(如宽高、长度等);
- auto:默认值,表示让浏览器决定怎么做。
当video元素中没有浏览器可以识别/支持的源时, 可能会显示视频的控制条(如果设置了controls属性),或者显示空白矩形区域(大多数情况),或显示海报(如果设置了poster属性)。
使用多种来源的视频和备用文本: (p356 - 358)
之前一个video元素只能包含一个视频源,当为了视频多种浏览器时,就需要指定不同格式的视频,并为不支持H5原生视频的浏览器准备备用文本(如视频下载链接等)。就可以只用元素:
<video controls>
<source src="video-1-url" type="video/mp4">
<source src="video-2-url" type="video/webm">
<p>
<a href="video-1-url">Download video!a>
p>
video>
- video元素中不需要指定src属性。
- 浏览器发现video元素时, 首先会检查元素本身是否有src,若没有,则会逐个检查source元素,直到找到它可以播放的一个源,并忽略后面的源。 不能识别video元素的浏览器会忽略上述,只加载可以认识的部分,比如备用文本(如果有的话)。
source的属性: (p357)
名称 | 描述 |
---|---|
src | 视频来源的url。 |
type | 用于指定视频的类型,帮助浏览器决定它是否能够播放该视频。 |
media | 用于为视频的来源指定CSS3查询,从而可以在不同尺寸屏幕下显示不同尺寸的视频。 |
提供可访问性: (p358)
(p358 - 362)
格式: H5支持6种音频文件格式:(p350 - 351)
格式 | 拓展名 | 浏览器支持 |
---|---|---|
Ogg Vorbis | .ogg | Firefox 3.5+、Chrome 5+、Opera 10.5+ |
MP3 | .mp3 | Safari 5+、Chrome 6+、IE9+、IOS |
WAV | .wav | Firefox 3.6+、Chrome 8+、Safari 5+、Opera 10.5+ |
ACC | .acc | Safari 3+、IE9+、IOS3+、Android 2+ |
MP4 | .mp4 | Safari 3+、Chrome 5+、IE9+、IOS3+、Android 2+ |
Opus | .opus | Firefox |
- 开发者至少需要为音频提供2中格式(Ogg Vorbis和MP3),才能确保获得所有兼容H5的浏览器支持。
- MP4是一种视频编解码器,但是也可以仅对音频数据进行编码。
- 若使用单个Ogg编码,则可以省略controls,因为他默认包含控件。
audio元素加载音频:
<audio src="audio-url">audio>
audio元素属性: (p360)
类似video属性,只是没有width
, height
, poster
。
包含
autoplay
属性会覆盖preload
属性的设置,因为只有加载音频文件才能播放;
preload
属性的值不会影响浏览器行为,它只影响请求。
提供带备用内容的多个视频源:
类似使用多种来源的视频和备用文本。(p361 - 362)
(p362 - 366)
使用MediaElement.js
嵌入Flash:
下载MediaElement.js并解压;
将build
文件夹内容复制到项目文件夹,并在html中引用里面的jquery.js
, mediaelement-and-player.min.js
, mediaelementplayer.min.css
;
像H5使用video
, audio
一样使用他们;
添加js代码:
$('video', 'audio').mediaelementplayer();
- 添加上述代码后,无论使用什么浏览器、无论浏览器是否支持H5多媒体,视频的播放控件看起来都是一样的。
- 不支持H5元素多媒体的浏览器,只要用户安装了Flash,也可以播放多媒体文件。
- 其他的Flash播放器解决方案包括:
- Video.js
- JW Player(免费版有水印)
- Flowplayer(免费版有水印)
(p366)