HTML5는 오디오 및 비디오 요소를 사용하여 오디오 및 비디오 콘텐츠를 삽입합니다. 이를 통해 HTML5를 지원하는 브라우저는 플러그인을 설치하지 않고도 비디오 및 오디오를 재생할 수 있습니다.
또한 이 두 태그와 관련된 JavaScript API가 제공되므로 자체 오디오 및 비디오 컨트롤을 만들 수 있습니다.
<!-- 嵌入视频 --> <video id="player" src="xxx.ogg" poster="mymovie.jpg" width="300" height="200"> Video player not available. </video> <!-- 嵌入音频 --> <audio src="xxx.mp3" id="myAudio">Audio player not available.</audio>
이 두 태그는 반드시 로드할 미디어 파일의 주소인 src 속성을 포함합니다. 너비 및 높이 속성은 비디오 플레이어의 크기를 지정합니다. 포스터 속성은 동영상이 로드되는 동안 표시되는 이미지입니다. 여는 태그와 닫는 태그 사이의 콘텐츠는 대체 콘텐츠입니다. 즉, 브라우저가 이 두 태그를 지원하지 않는 경우 표시됩니다. 모든 브라우저가 모든 미디어 형식을 지원하는 것은 아니므로 다양한 미디어 소스를 지정할 수 있습니다. 현재 `` 태그가 사용됩니다:
<!-- 嵌入视频 --> <video id="player"> <source src="xx.webm" type="video/webm; codecs='vp8, vorbis'"> <source src="xx.ogv" type="video/ogg; codecs='theora, vorbis'"> Video player not available. </video> <!-- 嵌入音频 --> <audio id="myAudio"> <source src="xx.ogg" type="audio/ogg"> <source src="xx.mp3" type="audio/mpeg"> Audio player not available.</audio>
이 두 태그를 지원하는 브라우저는 IE9+, Firefox 3.5+, Safari 4+, Opera 10.5+, Chrome, iOS 버전의 Safari 및 안드로이드용 웹킷.
오디오 및 비디오 요소에는 다음과 같은 공통 속성이 있습니다.
Attribute# 🎜🎜# | 데이터 유형설명 | |
---|---|---|
부울 값 | 자동재생 플래그를 가져오거나 설정합니다. | |
시간 범위 | 버퍼링된 시간 범위 개체를 다운로드했습니다. | |
바이트 범위 | 다운로드된 버퍼링된 바이트 범위 개체입니다. | |
INTEGER | 다운로드 속도, 초당 수신되는 평균 비트 수입니다. | |
부울 값 | 버퍼링을 조절할지 여부입니다. | |
부울 값 | 브라우저에 내장된 컨트롤의 표시 및 숨기기를 제어하려면 컨트롤 속성을 가져오거나 설정하세요. | |
INTEGER | 미디어 파일이 순환된 횟수입니다. | |
문자열 | 현재 재생 중인 미디어 파일의 URL입니다. | |
부동소수점 | 재생된 시간(초)입니다. | |
부동소수점 | 재생 속도를 가져오거나 설정합니다. 기본값은 1초입니다. | |
부동소수점 | 총 재생 시간, 단위는 초입니다. | |
부울 값 | 재생이 종료되었는지 여부. | |
부울 값 | [재생 완료 후 처음부터 다시 시작할지 여부]를 가져오거나 설정합니다. | |
부울 값 | [소리 미러링 여부]를 가져오거나 설정합니다. | |
INTEGER | 네트워크 연결 상태; 0: 비어 있음, 1: 로드 중, 2: 원본 데이터 로드 중, 4: 로드 완료됨. | |
부울 값 | 일시중지 여부. | |
부동소수점 | [현재 재생 속도]를 가져오거나 설정하세요. | |
시간 범위 | 현재 플레이 시간입니다. | |
INTEGER | 준비됐나요? 1: 데이터를 사용할 수 없습니다. 1: 현재 프레임을 표시할 수 있습니다. 2: 재생을 시작할 수 있습니다. 3: 재생을 처음부터 끝까지 수행할 수 있습니다. | |
시간 범위 | 검색 가능한 시간 범위입니다. | |
부울 값 | 플레이어가 미디어 파일의 새 위치로 이동하는지 여부. | |
문자열 | 미디어 파일 소스, 이 소스는 언제든지 다시 작성할 수 있습니다. | |
부동소수점 | [재생 시작 위치]를 가져오거나 설정합니다. 단위는 초입니다. | |
INTEGER | 현재 리소스에 필요한 총 바이트 수입니다. | |
INTEGER | 영상 높이는 영상에만 적용됩니다. | |
INTEGER | 영상의 너비는 영상에만 적용됩니다. | |
부동소수점 | [현재 볼륨]을 0.0에서 1.0으로 가져오거나 설정합니다. |
事件 | 说明 |
---|---|
abort | 下载中断。 |
canplay | 可以播放;readyState 为 2。 |
canplaythrough | 播放可以继续,即不会被中断;readyState 为 3。 |
canshowcurrentframe | 当前帧已下载;readyState 为 1。 |
dataunavailable | 没有数据导致不能播放;readyState 为 0。 |
durationchange | 改变了 duration 的值。 |
emptied | 网络连接关闭。 |
empty | 发生错误导致下载停止。 |
ended | 已播放到末尾,所以播放停止。 |
error | 下载期发生网络错误。 |
load | 已加载完成。可能会被废弃,建议使用 canplaythrough。 |
loadeddata | 媒体的第一帧已加载。 |
loadedmetadata | 媒体的元数据已加载。 |
loadstart | 下载已开始。 |
pause | 播放已被暂停。 |
play | 媒体已接受到开始播放的指令。 |
playing | 媒体已开始播放。 |
progress | 正在下载。 |
ratechange | 改变了播放速度。 |
seeked | 搜索结束。 |
stalled | 浏览器正尝试下载,但未接收到数据。 |
timeupdate | currentTime 被非法更新。 |
volumechange | 改变了 volume 或 muted 值。 |
waiting | 播放暂停,等待下载更多的数据。 |
之所以定义了这么多的事件,就是为了开发人员能够只使用少量的 HTML 和 JavaScript 就可以编写出自定义的音、视频播放器!
<p class="mediaplayer"> <p class="video"> <video id="player" src="http://people.mozilla.com/~prouget/demos/resources/videos/billyBrowsers.ogg" poster="mymovie.jpg" width="300" height="200"> Video player not available. </video> </p> <p class="controls"> <input type="button" value="Play" id="video-btn"> <span id="curtime">0</span><span id="duration">0</span> </p> </p>
现在我们加一些 JavaScript ,就可以自定义一个简单的视频播放器:
//取得元素引用 var player = document.getElementById("player"), btn = document.getElementById("video-btn"), curtime = document.getElementById("curtime"), duration = document.getElementById("duration");//实测,得不到整个视频的总体播放时间 //更新播放时间 duration.innerHTML = player.duration; //为按钮添加事件处理程序 EventUtil.addHandler(btn, "click", function (event) { if (player.paused) { player.play(); btn.value = "Pause"; } else { player.pause(); btn.value = "Play"; } }); //定时更新当前时间 setInterval(function () { curtime.innerHTML = player.currentTime; }, 250);
可以进一步扩展这个视频播放器,让它可以使用更多的属性,监听更多的事件。同样的代码也可以用于 audio 元素。
audio 和 video 元素都有一个 canPlayType() 方法,它接收一个格式/编解码器的字符串,返回 “probably”、”maybe”、”“,所以这样这样使用:
if (audio.canPlayType("audio/mpeg")){ ... }
因为真正决定文件是否能够播放的是编码格式,所以建议同时传入 MIME 类型和编解码器,这样检测会更准确:
if (audio.canPlayType("audio/ogg; codecs=\"vorbis\"")){ ... }
注意,编解码器必须使用引号!下面列出已得到支持的音/视频格式和编解码器:
音频 | 字符串 | 支持的浏览器 |
---|---|---|
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+ |
audio 元素有一个原始的 JavaScript 构造函数 Audio,可以利用它来控制什么时候播放音频:
var audio = new Audio("xxx.mp3"); EventUtils.addHandler(audio, "canplaythrough", function(event){ audio.play(); });
上面的代码实现了这样的功能:当下载完成后自动播放音频。
在 iOS 中,调用 play() 会弹出一个对话框,得到用户许可后才可以播放。
如果想要在一个音频播放完之后在播放另一个音频,可以在 onfinish 事件中调用 play() 方法。
相关推荐:
위 내용은 HTML5에 오디오와 비디오를 삽입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!