HTML5 멀티미디어 오디오 및 비디오에 대한 자세한 소개(1)
- 黄舟원래의
- 2017-05-19 16:57:312587검색
일반적으로 브라우저는 웹페이지에서 오디오와 비디오를 재생하기 위해 플래시를 설치합니다.
HTML5는 오디오 및 비디오 재생을 위한 오디오 및 비디오 요소를 추가하므로 플래시에 대한 의존도가 줄어듭니다.
오디오에 대한 오디오 지원
HTML5는 오디오 요소를 통해 오디오를 포함하는 표준 방법을 지정합니다.
현재 오디오 요소는 다음 세 가지 오디오 형식을 지원합니다.
| 音频格式 | IE9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 |
|---|---|---|---|---|---|
| Ogg Vorbis | NO | YES | YES | YES | NO |
| MP3 | YES | NO | NO | YES | YES |
| Wav | NO | YES | YES | NO | YES |
비디오에 대한 비디오 지원
HTML5는 비디오 요소를 통해 비디오를 포함하는 표준 방법을 지정합니다.
현재 비디오 요소는 다음 세 가지 비디오 형식을 지원합니다.
| 格式 | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
| MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
| WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
오디오 및 비디오 재생 오디오 및 비디오 예제
<!Doctype html>
<html>
<head>
<title>HTML5多媒体</title>
<meta charset="utf-8"/>
</head>
<body>
<p>
<audio id="myAudio" controls="controls">
<source src="resource/传奇.mp3" type="audio/mpeg">
您的浏览器不支持audio
</audio>
</p>
<p>
<video id="myVideo" controls="controls">
<source src="resource/手语.mp4" type="video/mp4">
您的浏览器不支持video
</video>
</p>
</body>
</html>위는 오디오 및 비디오 재생을 위한 가장 간단한 예제 코드입니다. , 물론 mp3, mp4 리소스 파일은 직접 구하셔야 합니다~
다음은 제가 만든 샘플 코드의 실행 효과로, 오디오와 비디오가 모두 재생됩니다! 
[관련 추천]
1. html5의 동영상 태그 테스트 애플리케이션에 대한 자세한 설명
2. html 5 video 요소를 활용하여 동영상 플레이어 만들기
3. mp4가 재생되지 않는 video 태그 문제 및 해결방법 공유
4. H5 비디오 태그가 소리만 재생되고 비디오는 재생되지 않는 문제 해결
5. IIS의 MIME 형식이 MP4 형식으로 등록되지 않아 동영상 태그를 인식할 수 없음
위 내용은 HTML5 멀티미디어 오디오 및 비디오에 대한 자세한 소개(1)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML5 캔버스에 대한 자세한 설명(6)다음 기사：HTML5 캔버스에 대한 자세한 설명(6)