欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

如何使用 HTML5 嵌入音频和视频(媒体标签)

程序员文章站 2022-05-11 08:29:50
...

HTML5 使用 audio 和 video 元素来嵌入音频和视频内容。

另外还提供了与这两个标签相关的 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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

这两个标签,都必须包含 src 属性,即要加载的媒体文件地址。width 和 height 属性是指定视频播放器的大小。poster 属性是在加载视频期间会显示的图像。位于开始和结束标签之间的内容是后备内容,即当浏览器不支持这两个标签时会显示这些内容。 因为不是所有的浏览器都支持所有的媒体格式,所以可以指定不同的媒体来源。这时会用到 `` 标签:

<!-- 嵌入视频 -->
<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

支持这两个标签的浏览器有这些:IE9+、Firefox 3.5+、Safari 4+、Opera 10.5+、Chrome、iOS 版的 Safari 和 Android 版的 Webkit。

1 属性

audio 和 video 元素有这些共有的属性:

属性 数据类型 说明
autoplay 布尔值 获取或设置 autoplay 标志。
buffered 时间范围 已下载的缓冲的时间范围对象。
bufferedBytes 字节范围 已下载的缓冲的字节范围对象。
bufferingRate 整数 下载速率,每秒平均接收到的位数。
bufferingThrottled 布尔值 是否对缓冲进行节流。
controls 布尔值 获取或设置 controls 属性,控制浏览器内置控件的显示与隐藏。
currentLoop 整数 媒体文件已循环的次数。
currentSrc 字符串 当前播放的媒体文件的 URL。
currentTime 浮点数 已经播放的秒数。
defaultPlaybackRate 浮点数 获取或设置播放速度,默认为 1 秒。
duration 浮点数 总播放时间,单位是秒。
ended 布尔值 是否已播放结束。
loop 布尔值 获取或设置【播放完成后是否再从头开始播放】。
muted 布尔值 获取或设置【是否镜音】。
networkState 整数 网络连接状态;0:空;1:正在加载;2:正在加载原数据;3:已经加载了第一帧;4:加载完成。
paused 布尔值 是否暂停。
playbackRate 浮点数 获取或设置【当前的播放速度】。
played 时间范围 当前已经播放的时间。
readyState 整数 是否已就绪。1:数据不可用;1:可以显示当前帧;2:可以开始播放;3:可以从头到尾播放。
seekable 时间范围 可以搜索的时间范围。
seeking 布尔值 播放器是否正移动到媒体文件的新位置。
src 字符串 媒体文件的来源,可以在任何时候重写这个来源。
start 浮点数 获取或设置【开始播放的位置】,单位是秒。
totalBytes 整数 当前资源所需的总字节数。
videoHeight 整数 视频的高度,只适用于 video。
videoWidth 整数 视频的宽度,只适用于 video。
volume 浮点数 获取或设置【当前音量】从 0.0 到 1.0。

2 事件

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

事件 说明
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 自定义媒体播放器

 <div class="mediaplayer">
    <div 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>
    </div>
    <div class="controls">
        <input type="button" value="Play" id="video-btn">
        <span id="curtime">0</span><span id="duration">0</span>
    </div>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

现在我们加一些 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);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

可以进一步扩展这个视频播放器,让它可以使用更多的属性,监听更多的事件。同样的代码也可以用于 audio 元素。

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

audio 和 video 元素都有一个 canPlayType() 方法,它接收一个格式/编解码器的字符串,返回 “probably”、”maybe”、”“,所以这样这样使用:

if (audio.canPlayType("audio/mpeg")){
      ...
  }
  • 1
  • 2
  • 3

因为真正决定文件是否能够播放的是编码格式,所以建议同时传入 MIME 类型和编解码器,这样检测会更准确:

if (audio.canPlayType("audio/ogg; codecs=\"vorbis\"")){
  ...
}
  • 1
  • 2
  • 3

注意,编解码器必须使用引号!下面列出已得到支持的音/视频格式和编解码器:

音频 字符串 支持的浏览器
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();
 });
  • 1
  • 2
  • 3
  • 4

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

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

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