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

JavaScript 同时被 2 个专栏收录
91 篇文章 0 订阅
7 篇文章 1 订阅

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>
这两个标签,都必须包含 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>

支持这两个标签的浏览器有这些: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浏览器正尝试下载,但未接收到数据。
timeupdatecurrentTime 被非法更新。
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>

现在我们加一些 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\"")){
  ...
}

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

音频字符串支持的浏览器
AACaudio/mp4; codecs=”mp4a.40.2”IE9+、Safari4+、iOS 版的 Safari
MP3audio/mpegIE9+、Chrome
Vorbisaudio/ogg; codecs=”vorbis”Firefox 3.5+、Chrome、Opera 10.5+
WAVaudio/wav; codecs=”1”Firefox 3.5+、Chrome、Opera 10.5+

视频字符串支持的浏览器
H.264video/mp4; codecs=”avcl.42E01E, mp4a.40.2”IE9+、Safari4+、iOS 版的 Safari、Android 版 WebKit
Theoravideo/ogg; codecs=”theora”Firefox 3.5+、Chrome、Opera 10.5+
WebMvideo/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() 方法。

  • 2
    点赞
  • 0
    评论
  • 7
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值