HTML5 오디오 및 비디오를 잘 사용하는 방법을 가르쳐주세요.
- Y2J원래의
- 2017-05-19 13:28:352767검색
HTML5는 HTML 태그 "오디오" 및 "비디오"를 통해 삽입된 미디어를 지원하므로 개발자는 HTML 문서에 미디어를 쉽게 삽입할 수 있습니다.
Embed MediaEDIT
HTML에 미디어 삽입:
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> 你的浏览器不支持 <code>video</code> 标签.</video>
이 예는 Theora 웹사이트에서 가져온 재생 컨트롤러가 있는 재생 가능한 비디오를 보여줍니다.
다음은 HTML 문서에 오디오를 삽입하는 예입니다.
<audio src="/test/audio.ogg"><p>你的浏览器不支持audio标签</p></audio>
src 속성 은 오디오 파일의 URL 또는 로컬 파일의 경로로 설정할 수 있습니다.
<audio src="audio.ogg" controls autoplay loop><p>你的浏览器不支持audio标签</p></audio>
이 예제의 코드는 HTML "audio" 요소의 일부 특성을 사용합니다.
컨트롤: 웹 페이지의 오디오용 표준 HTML5 컨트롤러를 표시합니다.
autoplay : 오디오를 자동으로 재생합니다.
loop : 오디오를 자동으로 반복합니다.
<audio src="audio.mp3" preload="auto" controls></audio>
preload 속성은 오디오 요소가 포함된 대용량 파일을 버퍼링하는 데 사용됩니다. 설정할 속성 값은 세 가지입니다.
"none"은 파일을 버퍼링하지 않습니다.
"auto" 오디오 파일 버퍼링
"metadata"는 파일의 메타데이터만 버퍼링합니다.
e02da388656c3265154666b7c71a8ddc 태그를 사용하여 여러 파일에 대해 지원되는 인코딩 형식을 제공할 수 있습니다. 브라우저. 예:
<video controls> <source src="foo.ogg" type="video/ogg"> <source src="foo.mp4" type="video/mp4"> Your browser does not support the <code>video</code> element.</video>
브라우저가 Ogg 형식을 지원하는 경우 이 코드는 Ogg 파일을 재생합니다. 브라우저가 Ogg를 지원하지 않는 경우 브라우저는 MPEG-4 파일을 재생합니다. 다양한 브라우저의 비디오 및 오디오 인코딩 형식 지원을 보려면 오디오 및 비디오 요소가 지원하는 미디어 형식 목록을 참조하세요.
비디오 파일에 필요한 비디오 코덱 값을 지정할 수도 있습니다. 이렇게 하면 브라우저가 보다 정확한 결정을 내릴 수 있습니다.
<video controls> <source src="foo.ogg" type="video/ogg; codecs= dir ac, speex"> Your browser does not support the <code>video</code> element.</video>
여기에서는 Dirac 및 Speex를 사용하도록 비디오 태그를 지정합니다. 비디오 코덱. 브라우저가 Ogg를 지원하지만 지정된 코덱을 지원하지 않는 경우 비디오가 로드되지 않습니다.
type 속성이 지정되지 않은 경우 미디어 유형이 서버로 반환된 후 브라우저가 이를 해결할 수 있는지 확인하고 그렇지 않은 경우 다음 소스를 확인합니다. 지정된 소스 요소 중 사용 가능한 요소가 없으면 오류 이벤트 가 비디오 태그로 전달됩니다. type 속성이 지정되면 브라우저가 재생할 수 있는 유형과 비교됩니다. 인식되지 않으면 서버에 묻지도 않고 동시에 다음 소스를 확인합니다.
미디어 이벤트를 클릭하면 미디어 재생 이벤트의 전체 목록을 볼 수 있습니다. 다양한 브라우저에서 지원되는 미디어 형식에 대한 자세한 내용을 보려면 오디오 및 비디오 요소에서 지원되는 미디어 형식을 클릭하세요.
미디어 재생 컨트롤EDIT 🎜>다음을 사용하여 HTML 문서에 미디어를 삽입한 후 새로운 요소를 JavaScript 코드를 사용하여
프로그래밍 방식으로 제어할 수 있습니다. 예를 들어 재생을 (다시)시작하려는 경우 다음 코드를 작성할 수 있습니다. var v = document.getElementsByTagName("video")[0];v.play();첫 번째 줄은 현재 문서의 첫 번째 비디오 요소를 가져오고 다음 줄은 play() 메서드를 호출합니다. 이 메소드는 미디어 요소를 구현하는 인터페이스에 정의되어 있습니다.
HTML5 오디오 플레이어의 재생, 일시 정지, 볼륨 증가 및 감소 제어는 간단합니다.
<audio id="demo" src="audio.mp3"></audio><p> <button onclick ="document.getElementById('demo').play()">播放声音</button> <button onclick="document.getElementById('demo').pause()">暂停声音</button> <button onclick="document.getElementById('demo').volume+=0.1">提高音量</button> <button onclick="document.getElementById('demo').volume-=0.1">降低音量</button></p>
미디어 다운로드 종료 편집
미디어 재생을 중지하는 것은 Pause() 메서드를 호출하는 것만큼 간단합니다. 그러나 브라우저는 미디어 요소가 가비지 수집 메커니즘에 의해 재활용될 때까지 미디어를 계속 다운로드합니다. 미디어 다운로드를 즉시 중지하는 방법은 다음과 같습니다.
var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src='';
//or
mediaElement.removeAttribute("src");미디어 요소의 src 속성을 제거하거나 간단히 빈
문자열으로 설정합니다. 브라우저) 요소의 내부 디코딩을 파괴하여 미디어 다운로드를 종료할 수 있습니다. RemoveAttribute() 작업은 깨끗하지 않으며 39000f942b2545a5315c57fa3276f220 요소의 'src' 속성을 빈 문자열로 설정하면 원치 않는 요청이 발생할 수 있습니다(Mozilla Firefox 22).
미디어 요소는 현재 재생 위치에서 미디어 콘텐츠의 특정 지점으로의 이동을 지원합니다. 이는 요소의 currentTime 속성 값을 설정하여 수행됩니다. 요소 속성에 대한 자세한 내용은 HTMLMediaElement를 참조하세요. 재생을 계속하려는 시간을 초 단위로 설정하기만 하면 됩니다. 你可以使用元素的属性seekable来决定媒体目前能查找的范围。它返回一个你可以查找的TimeRanges 时间对象。 标记播放范围EDIT 在给一个b97864c2e0ef2353a16c4d64c7734e92或者39000f942b2545a5315c57fa3276f220元素标签指定媒体的URI的时候，你可以选择性地加入一些额外信息来指定媒体将要播放的部分。要这样做的话，需要附加一个哈希标志("#")，后面跟着媒体片段的描述。 一条指定时间范围的语句： #t=[starttime][,endtime] 时间值可以被指定为秒数（如浮点数）或者为以冒号分隔时/分/秒格式（像2小时5分钟1秒表示为2:05:01）。 【相关推荐】var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start();
// 返回开始时间
(in seconds)mediaElement.seekable.end();
// 返回结束时间 (in seconds)mediaElement.currentTime = 122;
// 设定在 122 secondsmediaElement.played.end();
// 返回浏览器播放的秒数
위 내용은 HTML5 오디오 및 비디오를 잘 사용하는 방법을 가르쳐주세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!