平凡前端之路_03.HTML5的音频视频多媒体

HTML5音频视频

#
1	在 HTML 中播放音频视频并不容易！
2	直到现在，仍然不存在一项旨在网页上显示音频视频的标准。大多数音频视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
3	windows平台的IE浏览器利用Activex控件来播放flash,而其它的浏览器则使用Netscape插件技术来播放flash。
4	而在HTML5 中规定了一种通过 audio/video 元素来包含音频视频的标准方法

HTML5音频

#	兼容性
1	Safari、Chrome、Opera和Firefox不能自动播放，需要一个页面元素上的交互
2	width / height 属性没有作用，必须使用 style 标签里面的样式去控制它

浏览器	MP3	Wav	Ogg
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	NO	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	NO	YES	YES

---

HTML5视频

#	兼容性
1	Safari、Chrome、Opera和Firefox不能自动播放，需要一个页面元素上的交互

浏览器	MP4	WebM	Ogg
Internet Explorer	9+	YES	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	NO	YES	YES
Safari 5+	YES	NO	NO
Opera 10.6+	NO	YES	YES

---

HTML5音频视频常用属性

属性	描述
src	设置或返回音视频的多媒体资源的值。
autoplay	设置或返回是否在就绪（加载完成）后随即播放音视频。
controls	设置或返回音视频是否应该显示控件（比如播放/暂停等）。
loop	设置或返回音视频是否应在结束时再次播放。
width	设置或返回音视频的 高度属性的值（音频的width没有作用，必须使用 style 标签里面的样式去控制）。
height	设置或返回音视频的 宽度属性的值（音频的width没有作用，必须使用 style 标签里面的样式去控制）。
poster	设置或返回 视频 的 海报封面属性的值。
muted	设置或返回音视频是否关闭声音。
currentTime	设置或返回音视频中的当前播放位置（以秒计）
duration	返回当前音频/视频的长度（以秒计）
paused	设置或返回音视频是否暂停
preload	设置或返回音频/视频是否应该在页面加载后进行加载
volume	设置或返回音频/视频的音量（0~1）
playbackRate	设置或返回音频/视频播放的速度（大于1快播 小于1慢放）

HTML5音频视频常用方法

方法	描述
load()	重新加载音频/视频元素
play()	开始播放音频/视频
pause()	暂停当前播放的音频/视频

HTML5音频视频常用事件

事件	描述
pause	当音频/视频已暂停时
play	当音频/视频已开始或不再暂停时
playing	当音频/视频在已因缓冲而暂停或停止后已就绪时

HTML5音频视频特殊属性

属性	描述
controlsList（有兼容问题）	设置或返回 不 显示指定控件。枚举值有（nofullscreen：不显示全屏控件，nodownload：不显示下载控件， noremoteplayback：不显示远程回放控件）

浏览器不支持音频视频自动播放的解决方案

#	解决方案
1	在chrome 浏览器中输入：chrome://flags，搜索“Autoplay policy”，默认为“Default”，修改为 “No user gesture is required”
2	muted静音的自动播放总是被允许的。
3	用户已经产生交互（点击触摸滑动等…） ，而不是说一定要用户点击audio或者video去播放

HTML5自适应的图片策略

让浏览器能自动调节图片尺寸。

• 分辨率切换：小屏手机屏幕上显示网页，那么没有必要在网页上嵌入pc端的大图片，浪费带宽。
• 艺术方向：当网站在狭窄的屏幕上观看时，显示一幅包含了重要细节的裁剪版图片，而不是显示pc端的大图，这样会显得图片缩小，重要地方不突出。

使用srcset+sizes的切换解决方案

img 元素的srcset+sizes提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。
srcset 属性定义了我们允许浏览器选择的图像集合，浏览器可以根据宽、高和像素密度来加载相应的图片资源。

使用srcset的宽度描述符时需要sizes属性。
* srcset语法: “图片路径 物理像素, 图片路径 物理像素, …”
* size: “媒体查询 css像素”
* src: 当浏览器不支持上面的属性的时候，默认加载这里

检查sizes列表中哪个媒体条件是第一个为真
加载srcset列表中引用的最接近所选的槽大小的图像

//<img 
//	srcset="big-1400w.jpg 1440w, 
//		middle-1000w.jpg 1000w, 
//		small.jpg 750px" 
//	sizes="(max-width: 1920px) 1440px,
 //    	(max-width: 1200px) 1000px,
//     	750px"
//    src="small.jpg " alt=""
///>

HTML5 picture 标签

HTML5 的 <picture> 元素可以设置多张图片。
<picture> 元素类似于 <video> 和 <audio> 元素。可以设备不同的资源，第一个设置的资源为首选使用的：

• srcset 属性的必须的，定义了图片资源。
• media 属性是可选的。
• source当中的也可以使用srcset、sizes属性。
• 必须提供一个img元素，以备浏览器不支持的时候使用。

<picture>
  <source media="(max-width: 799px)" srcset="img_smallflower.jpg" >
  <source media="(min-width: 800px)" srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

把本来给手机用的图片作为 src ，其他放在 srcset 里面，因为电脑上浏览器没啥问题（不带 IE ）

HTML 知识题

---

题目	答案
HTML5不支持的视频格式	flv
Canvas 用于填充颜色的属性	fillStyle
HTML中注释的写法	<!-- code–>
Canvas不依赖分辨率	错误
HTML5 之前的 HTML 版本	HTML 4.01
建立一个有序列表	<ol></ol>
<a>链接的目标属性值	_self、_blank、_top
可以在html页面中显示“<”	&lt;
表格中行的开始和结束标记	<tr></tr>