题目概览
HTML5如何使用音频和视频- 怎样抽离样式模块
- 对事件冒泡机制的理解
题目解答
HTML5如何使用音频和视频
-
视频：多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。当前，video 元素支持三种视频格式，
- Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件；
- MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件；
- WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件；
<video src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg"> <!--此处添加字幕文件--> <track label="English" kind="subtitles" srclang="en" src="./test.vtt" default> 您的浏览器不支持html5 video </video><!--字幕文件的格式如下：--> <pre> WEBVTT 1 00:00:00.240 --> 00:00:04.130 大家好 最近 Visual Studio 2013 做了一些更新 2 00:00:04.140 --> 00:00:08.110 那我们今天请到 twMVC 的 Dino 来为我们介绍这个更新里面关于 SASS Editor 的部分 3 00:00:18.120 --> 00:00:19.280 </pre> -
音频：大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。当前，audio 元素支持三种音频格式：Ogg Vorbis、MP3、Wav
<audio controls src="http://www.w3school.com.cn/i/song.mp3"></audio> <!--source提供多个音频元素，供浏览器自身播放能力自动选择，如果支持的不知一种，浏览器会选择第一个来源--> <audio controls> <source src="http://www.w3school.com.cn/i/song.mp3"> <source src="http://www.w3school.com.cn/i/song.ogg"> </audio> <!--autoplay设置音频自动播放--> <audio autoplay controls> <source src="http://www.w3school.com.cn/i/song.mp3"> 您的浏览器不支持audio </audio> -
可脚本话的视频和音频
-
判断浏览器支持情况
// 判断浏览器是否支持audio或者video元素最简单的办法是用脚本动态创建它，然后检测特定的函数是否存在 var hasVideo = !!(document.createElement('video').canPlayType); -
audio 和 video 元素有这些共有的属性
属性 数据类型 说明 autoplay 布尔值 获取或设置 autoplay 标志。 buffered 时间范围 已下载的缓冲的时间范围对象。
| bufferedBytes | 字节范围 | 已下载的缓冲的字节范围对象。 |
| bufferingRate | 整数 | 下载速率，每秒平均接收到的位数。 |
| bufferingThrottled | 布尔值 | 是否对缓冲进行节流。 |
| controls | 布尔值 | 获取或设置 controls 属性，控制浏览器内置控件的显示与隐藏。 |
| currentLoop | 整数 | 媒体文件已循环的次数。 |
| currentSrc | 字符串 | 当前播放的媒体文件的 URL。 |
| currentTime | 浮点数 | 已经播放的秒数。 |
| defaultPlaybackRate | 浮点数 | 获取或设置播放速度，默认为 1 秒。 |
| duration | 浮点数 | 总播放时间，单位是秒。 |
| ended | 布尔值 | 是否已播放结束。 |
| loop | 布尔值 | 获取或设置【播放完成后是否再从头开始播放】。 |
| muted | 布尔值 | 获取或设置【是否镜音】。 |
| networkState | 整数 | 网络连接状态；0：空；1：正在加载；2：正在加载原数据；3：已经加载了第一帧；4：加载完成。 |
| paused | 布尔值 | 是否暂停。 |
| playbackRate | 浮点数 | 获取或设置【当前的播放速度】。 |
| played | 时间范围 | 当前已经播放的时间。 |
| readyState | 整数 | 是否已就绪。1：数据不可用；1：可以显示当前帧；2：可以开始播放；3：可以从头到尾播放。 |
| seekable | 时间范围 | 可以搜索的时间范围。 |
| seeking | 布尔值 | 播放器是否正移动到媒体文件的新位置。 |
| src | 字符串 | 媒体文件的来源，可以在任何时候重写这个来源。 |
| start | 浮点数 | 获取或设置【开始播放的位置】，单位是秒。 |
| totalBytes | 整数 | 当前资源所需的总字节数。 |
| videoHeight | 整数 | 视频的高度，只适用于 video。 |
| videoWidth | 整数 | 视频的宽度，只适用于 video。 |
| volume | 浮点数 | 获取或设置【当前音量】从 0.0 到 1.0。 |-
audio 和 video 元素有这些共有的事件
事件 说明 abort 下载中断。 canplay 可以播放；readyState 为 2。
| canplaythrough | 播放可以继续，即不会被中断；readyState 为 3。 |
| canshowcurrentframe | 当前帧已下载；readyState 为 1。 |
| dataunavailable | 没有数据导致不能播放；readyState 为 0。 |
| durationchange | 改变了 duration 的值。 |
| emptied | 网络连接关闭。 |
| empty | 发生错误导致下载停止。 |
| ended | 已播放到末尾，所以播放停止。 |
| error | 下载期发生网络错误。 |
| load | 已加载完成。可能会被废弃，建议使用 canplaythrough。 |
| loadeddata | 媒体的第一帧已加载。 |
| loadedmetadata | 媒体的元数据已加载。 |
| loadstart | 下载已开始。 |
| pause | 播放已被暂停。 |
| play | 媒体已接受到开始播放的指令。 |
| playing | 媒体已开始播放。 |
| progress | 正在下载。 |
| ratechange | 改变了播放速度。 |
| seeked | 搜索结束。 |
| stalled | 浏览器正尝试下载，但未接收到数据。 |
| timeupdate | currentTime 被非法更新。 |
| volumechange | 改变了 volume 或 muted 值。 |
| waiting | 播放暂停，等待下载更多的数据。 |-
检测编解码器的支持情况：audio 和 video 元素都有一个 canPlayType() 方法，它接收一个格式/编解码器的字符串，返回 “probably”、”maybe”、”“，所以这样这样使用
音频 字符串 支持的浏览器 AAC audio/mp4; codecs=”mp4a.40.2” IE9+、Safari4+、iOS 版的 Safari MP3 audio/mpeg IE9+、Chrome
| Vorbis | audio/ogg; codecs=”vorbis” | Firefox 3.5+、Chrome、Opera 10.5+ |
| WAV | audio/wav; codecs=”1” | Firefox 3.5+、Chrome、Opera 10.5+ |视频 字符串 支持的浏览器 H.264 video/mp4; codecs=”avcl.42E01E, mp4a.40.2” IE9+、Safari4+、iOS 版的 Safari、Android 版 WebKit Theora video/ogg; codecs=”theora” Firefox 3.5+、Chrome、Opera 10.5+ WebM video/webm; codecs=”vp8, vorbis” Firefox 4+、Chrome、Opera 10.6+ if (audio.canPlayType("audio/mpeg")){ ... } if (audio.canPlayType("audio/ogg; codecs="vorbis"")){ ... } -
怎样抽离样式模块
- 把常用的css样式单独做成css文件，通用的和业务相关的分离出来，通用的做成样式模块儿共享，业务相关的，放进业务相关的库里面做成对应功能的模块儿
- 在使用Vue时，CSS本来就是在组件内的，如果是公用的可以抽离到外面
- 在用React时，使用styled-component方案来组织CSS，使用这种方案时，CSS也可以看作是一个React组件
对事件冒泡机制的理解
-
按照W3C事件模型，事件流按照次序依次为
捕获阶段，目标阶段，冒泡阶段。如果事件绑定时候，禁止了冒泡，则事件流会停止在目标阶段。 -
先说两个有关DOM事件流的概念
事件冒泡和事件捕获。事件冒泡指事件沿着DOM树向上通知，事件捕获和事件冒泡相反，事件沿着DOM数向下通知 -
开发者可以自己决定事件处理注册到捕获阶段，或者是冒泡阶段。
element1.addEventListener('click',doSomething2,true)如果最后一个参数为true，则注册到捕获阶段。 -
事件委托(事件代理)：简单说起来就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。