每日思考（2020/02/13）

题目概览

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 时间范围已下载的缓冲的时间范围对象。

属性	数据类型	说明
autoplay	布尔值	获取或设置 autoplay 标志。
buffered	时间范围	已下载的缓冲的时间范围对象。

audio 和 video 元素有这些共有的事件

事件说明

abort 下载中断。

canplay 可以播放；readyState 为 2。

事件	说明
abort	下载中断。
canplay	可以播放；readyState 为 2。

检测编解码器的支持情况：audio 和 video 元素都有一个 canPlayType() 方法，它接收一个格式/编解码器的字符串，返回 “probably”、”maybe”、”“，所以这样这样使用

音频字符串支持的浏览器

AAC audio/mp4; codecs=”mp4a.40.2” IE9+、Safari4+、iOS 版的 Safari

MP3 audio/mpeg IE9+、Chrome

音频	字符串	支持的浏览器
AAC	audio/mp4; codecs=”mp4a.40.2”	IE9+、Safari4+、iOS 版的 Safari
MP3	audio/mpeg	IE9+、Chrome

视频	字符串	支持的浏览器
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组件

对事件冒泡机制的理解