Topic Overview
HTML5How to Use Audio and Video- How detached style module
- Understanding of the event bubbling mechanism
Subject to answer
HTML5How to Use Audio and Video
Video: Most video via plug-ins (such as Flash) to be displayed. However, not all browsers have the same plugins. HTML5 provides a standard way to include video through the video elements. Current, video element supports three video formats,
- Ogg = Ogg files with Theora video encoding and Vorbis audio coding;
- MPEG4 = MPEG 4 files with H.264 video coding and audio coding AAC;
- WebM = WebM files with VP8 video coding and audio coding Vorbis;
<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>Audio: Most audio through the plug-in (such as Flash) to play. However, not all browsers have the same plugins. HTML5 provides a standard way to include the audio through the audio elements. audio element can play sound files or audio stream. Current, audio element supports three audio formats: 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>Scripts can then video and audio
Determining browser support case
// 判断浏览器是否支持audio或者video元素最简单的办法是用脚本动态创建它，然后检测特定的函数是否存在 var hasVideo = !!(document.createElement('video').canPlayType);audio and video elements have these common attributes
Attributes type of data Explanation autoplay Boolean value Gets or sets the autoplay flag. buffered time limit Downloaded buffering time object. bufferedBytes Byte range Byte range objects downloaded buffered. bufferingRate Integer Download speed, average received bits per second. bufferingThrottled Boolean value If the buffer is throttled. controls Boolean value Gets or sets the controls property, to control the browser display and built-in controls to hide. currentLoop Integer The media file number of cycles. currentSrc String URL of the currently playing media files. currentTime Float It has played in seconds. defaultPlaybackRate Float Gets or sets the playback speed, the default is one second. duration Float Total playing time, in seconds. ended Boolean value Whether the show ends. loop Boolean value [Gets or sets whether to start playing again from scratch after playing Finish. muted Boolean value Gets or sets the tone mirror [whether]. networkState Integer Network connection status; 0: Empty; 1: Loading; 2: Loading the original data; 3: the first frame has been loaded; 4: loaded. paused Boolean value Whether to suspend. playbackRate Float Gets or sets the playback speed [current]. played time limit The current time has been played. readyState Integer Whether ready. 1: data is not available; 1: to display a current frame; 2: start playing; 3: can play from beginning to end. seekable time limit Time range search. seeking Boolean value Whether the player is moving to a new location of the media file. src String Source media file, you can override this source at any time. start Float Gets or sets the [position] to start playing in seconds. totalBytes Integer The total number of bytes required current resources. videoHeight Integer Height of the video, is only applicable to video. videoWidth Integer Width of the video, is only applicable to video. volume Float Gets or sets the current volume [] from 0.0 to 1.0. audio and video elements common to these events
event Explanation abort Download interrupted. canplay You can play; readyState 2. canplaythrough Playback can continue, that will not be interrupted; readyState is 3. canshowcurrentframe The current frame have downloaded; readyState 1. Dtunvalble You can not play no data; 0 is the readyState. durationchange Change the value of duration. emptied Network connection is closed. empty Error occurs that causes the download stops. ended It has been played to the end, so stop playing. error Download Network error. load It has completed loading. It may be abandoned, it is recommended to use canplaythrough. loadeddata The first frame of the loaded media. loadedmetadata Metadata of the media has been loaded. loadstart Download started. pause Play has been suspended. play Media has received an instruction to start playing. playing Media has started playing. progress downloading. ratechange Change the playback speed. seeked Search ends. stalled The browser is attempting to download, but no data is received. 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，则注册到捕获阶段。事件委托(事件代理)：简单说起来就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。