HTML5_html5 튜토리얼 팁의 오디오 및 비디오 미디어 재생 요소 요약

오디오 및 비디오 인코더/디코더는 오디오 및 비디오를 재생할 수 있도록 특정 오디오 또는 비디오 스트림을 인코딩 및 디코딩하는 데 사용되는 알고리즘 세트입니다. 원시 미디어 파일은 크기가 매우 크며, 인코딩되지 않으면 비디오 및 오디오 클립을 구성하는 데이터가 너무 커서 인터넷을 통해 전파되는 데 견딜 수 없는 시간이 걸릴 수 있습니다. 디코더가 없으면 수신기는 인코딩된 데이터를 원본 미디어 데이터로 재조립할 수 없습니다. 코덱은 특정 컨테이너 형식을 읽고 그 안에 있는 오디오 및 비디오 트랙을 디코딩할 수 있습니다.
미디어 요소 이해
1. 기본 동작: 미디어 요소 선언

XML/HTML 코드클립보드에 콘텐츠 복사

1. <오디오는 src="Adele-Set Fire를 제어합니다. To The Rain.mp3">
2. 사용 중인 브라우저가 HTML5 오디오를 지원하지 않습니다
3. 오디오>

코드의 컨트롤 속성은 시작, 중지, 건너뛰기, 볼륨 조절 등 일반적인 사용자 컨트롤을 표시하도록 브라우저에 지시합니다. 컨트롤 속성이 지정되지 않으면 사용자는 페이지에서 오디오를 재생할 수 없습니다.
2. 소스 요소 사용
가장 간단한 경우 src 속성이 미디어 파일을 직접 가리킬 수 있지만 브라우저가 해당 컨테이너나 인코더를 지원하지 않는 경우에는 어떻게 될까요? 이를 위해서는 백업 선언을 사용해야 합니다. fallback 문에는 여러 소스가 포함될 수 있으며 브라우저는 다양한 소스 중에서 선택할 수 있습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. <오디오 제어>
2. <소스 src="아델- Set Fire To The Rain.mp3" >
3. <소스 src="아델- Set Fire To The Rain.ogg" >
4. 오디오>

소스의 경우 선언 순서에 따라 브라우저가 판단합니다. 둘 이상이 지원되는 경우 브라우저는 지원되는 첫 번째 소스를 선택합니다.
3. 미디어 제어
오디오 요소 또는 비디오 요소에 자동 재생 속성을 설정하면 오디오 또는 비디오 파일이 로드된 후 사용자 상호작용 없이 자동으로 재생됩니다.
자주 사용하는 제어 기능

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

읽기 전용 미디어 속성

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

스크립트 가능한 속성 값

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

3.1 오디오 및 비디오 요소 사용
HTML5 비디오 요소는 오디오 요소와 매우 유사하지만 오디오 요소보다 몇 가지 더 많은 기능을 가지고 있습니다.

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

팁: 캔버스가 비디오를 그리기 소스로 사용하는 경우 현재 재생 중인 프레임만 그려집니다.