Summary of audio and video media playback elements in HTML5_html5 tutorial tips

Audio and video encoder/decoder is a set of algorithms used to encode and decode a specific audio or video stream so that the audio and video can be played. Raw media files are very large in size, and if they are not encoded, the data that makes up a video and audio clip may be so large that it takes an unbearable time to propagate over the Internet. Without a decoder, the receiver cannot reassemble the encoded data into the original media data. Codecs can read a specific container format and decode the audio and video tracks within it.
Understanding media elements
1. Basic operation: declare media elements

XML/HTML CodeCopy content to clipboard

1. <audio controls src="Adele-Set Fire To The Rain.mp3">
2. The browser you are using does not support HTML5 audio
3. audio>

The controls attribute in the code tells the browser to display common user controls, including start, stop, skip, and volume control. If the controls attribute is not specified, the user will not be able to play the audio on the page.
2. Use the source element
In the simplest case, the src attribute can point directly to the media file. However, what if the browser does not support the relevant container or encoder? This requires the use of backup declarations. Multiple sources can be included in the fallback statement, and the browser can choose from so many sources:

XML/HTML CodeCopy content to clipboard

1. <audio controls>
2. <source src="Adele- Set Fire To The Rain.mp3" >
3. <source src="Adele- Set Fire To The Rain.ogg" >
4. audio>

For sources, the browser will judge according to the order of declaration. If more than one is supported, the browser will choose the first supported source.
3. Media control
By setting the attribute autoplay in the audio element or video element, the audio or video file will automatically play after loading without any user interaction.
Commonly used control functions

函数	动作
load()	加载音频/视频文件，为播放做准备，通常情况下不必调用，除非是动态生成的元素。用来在播放前预加载。
play()	加载（有必要的话）并播放音频/视频文件。除非音频/视频已经暂停在其他位置了，否则默认从头开始播放
pause()	暂停处于播放状态的音频/视频文件
canPlayType(type)	测试video元素是否支持给定MIME类型的文件

Read-only media properties

只读特性	值
duration	整个媒体文件的播放时长，以s为单位。如果无法获取时长，则返回NaN。
paused	如果媒体文件当前被暂停，则返回true。如果还未开始播放，则返回false。
ended	如果媒体文件已经播放完毕，则返回true
startTime	返回最早的播放起始时间，一般是0.0，除非是缓冲过的媒体文件，并且一部分内容已经不在缓冲区
error	在发生了错误的情况下返回的错误代码
currentSrc	以字符串形式返回当前正在播放或已加载的文件。对应于浏览器在source元素中选择的文件。

Scriptable property values

特性	值
autoplay	将媒体文件设置为创建后自动播放，或者查询是否已设置为autoplay
loop	如果媒体文件播放完毕后能重新播放则返回true，或者将媒体文件设置为循环播放（或者不循环播放）
currentTime	以s为单位返回从开始播放到现在所用的时间。在播放过程中，设置currentTime来进行搜索，并定位到媒体文件的特定位置
controls	显示或隐藏用户控制界面，或者查询用户控制界面当前是否可见
volume	在0.0到1.0之间设置音频音量的相对值，或者查询当前音量的相对值。
muted	为音频文件设置静音或者消除静音，或者渐层当前是否为静音
autobuffer	通知播放器在媒体文件开始播放前，是否进行缓冲加载。如果媒体文件已经设置为autoplay，则忽略测特性。

3.1 Using audio and video elements
The HTML5 video element is very similar to the audio element, but has some more features than the audio element.

特性	值
poster	在视频加载完成之前，代表视频内容的图片的URL地址，可以想象一下“电影海报”。该特性不仅可读，而且可以修改，以便更换图片
width、height	读取或设置显示尺寸。如果设置的宽度与视频本身大小不匹配，可能导致居中显示，上下或左右可能出现黑色条状区域。
videoWidth、videoHeight	返回视频固有的或自适应的宽度和高度。只读video元素还有一个audio元素不支持的关键特性：可被HTML5 Canvas的函数调用。

Tip: When canvas uses video as the drawing source, only the currently playing frame is drawn.