집 > 기사 > 웹 프론트엔드 > HTML5에 오디오와 비디오를 삽입하는 방법

HTML5에 오디오와 비디오를 삽입하는 방법

不言원래의: 2018-07-17 14:18:003477검색

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=&#39;vp8, vorbis&#39;">
    <source src="xx.ogv" type="video/ogg; codecs=&#39;theora, vorbis&#39;">
    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 및 안드로이드용 웹킷.

1 속성

오디오 및 비디오 요소에는 다음과 같은 공통 속성이 있습니다.

데이터 유형설명autoplay부울 값자동재생 플래그를 가져오거나 설정합니다. 버퍼됨시간 범위버퍼링된 시간 범위 개체를 다운로드했습니다. bufferedBytes바이트 범위다운로드된 버퍼링된 바이트 범위 개체입니다. 버퍼링 속도INTEGER 다운로드 속도, 초당 수신되는 평균 비트 수입니다. bufferingThrottled부울 값 버퍼링을 조절할지 여부입니다. 컨트롤부울 값브라우저에 내장된 컨트롤의 표시 및 숨기기를 제어하려면 컨트롤 속성을 가져오거나 설정하세요. currentLoopINTEGER미디어 파일이 순환된 횟수입니다. currentSrc문자열현재 재생 중인 미디어 파일의 URL입니다. 현재시간부동소수점재생된 시간(초)입니다. 기본재생속도부동소수점 재생 속도를 가져오거나 설정합니다. 기본값은 1초입니다. 기간부동소수점총 재생 시간, 단위는 초입니다. 종료부울 값 재생이 종료되었는지 여부. 루프부울 값 [재생 완료 후 처음부터 다시 시작할지 여부]를 가져오거나 설정합니다. 음소거됨부울 값 [소리 미러링 여부]를 가져오거나 설정합니다. 네트워크상태INTEGER네트워크 연결 상태; 0: 비어 있음, 1: 로드 중, 2: 원본 데이터 로드 중, 4: 로드 완료됨. 일시중지됨부울 값일시중지 여부. 재생속도부동소수점[현재 재생 속도]를 가져오거나 설정하세요. 플레이함시간 범위현재 플레이 시간입니다. 준비상태INTEGER준비됐나요? 1: 데이터를 사용할 수 없습니다. 1: 현재 프레임을 표시할 수 있습니다. 2: 재생을 시작할 수 있습니다. 3: 재생을 처음부터 끝까지 수행할 수 있습니다. 검색 가능시간 범위검색 가능한 시간 범위입니다. 찾는 중부울 값 플레이어가 미디어 파일의 새 위치로 이동하는지 여부. src문자열 미디어 파일 소스, 이 소스는 언제든지 다시 작성할 수 있습니다. 시작부동소수점 [재생 시작 위치]를 가져오거나 설정합니다. 단위는 초입니다. totalBytesINTEGER현재 리소스에 필요한 총 바이트 수입니다. 동영상키INTEGER영상 높이는 영상에만 적용됩니다. 비디오 너비INTEGER영상의 너비는 영상에만 적용됩니다. 볼륨부동소수점 [현재 볼륨]을 0.0에서 1.0으로 가져오거나 설정합니다.

2 事件

audio 和 video 元素有这些共有的事件：

Attribute# 🎜🎜#

事件	说明
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 就可以编写出自定义的音、视频播放器！

3 自定义媒体播放器

 <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 元素。

4 检测编解码器的支持情况

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+

5 Audio 类型

audio 元素有一个原始的 JavaScript 构造函数 Audio，可以利用它来控制什么时候播放音频：

 var audio = new Audio("xxx.mp3");
 EventUtils.addHandler(audio, "canplaythrough", function(event){
     audio.play();
 });

上面的代码实现了这样的功能：当下载完成后自动播放音频。

在 iOS 中，调用 play() 会弹出一个对话框，得到用户许可后才可以播放。

如果想要在一个音频播放完之后在播放另一个音频，可以在 onfinish 事件中调用 play() 方法。