题目概览
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，则注册到捕获阶段。事件委托(事件代理)：简单说起来就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。