javascript基础学习系列三百二十三:自定义媒体播放器

使用和的 play()和 pause()方法,可以手动控制媒体文件的播放。综合使用属 性、事件和这些方法,可以方便地创建自定义的媒体播放器,如下面的例子所示:

   <div class="mediaplayer">
      <div class="video">
        <video id="player" src="movie.mov" 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> 28

通过使用 JavaScript 创建一个简单的视频播放器,上面这个基本的 HTML 就可以被激活了,如下所示:

// 取得元素的引用
let player = document.getElementById("player"),
      btn = document.getElementById("video-btn"),
      curtime = document.getElementById("curtime"),
      duration = document.getElementById("duration");
// 更新时长
duration.innerHTML = player.duration;
// 为按钮添加事件处理程序 btn.addEventListener( "click", (event) => {
      if (player.paused) {
        player.play();
        btn.value = "Pause";
      } else {
        player.pause();
        btn.value = "Play";
} });
// 周期性更新当前时间 setInterval(() => {
      curtime.innerHTML = player.currentTime;
    }, 250);

这里的 JavaScript 代码简单地为按钮添加了事件处理程序,可以根据当前状态播放和暂停视频。此 外,还给元素的 load 事件添加了事件处理程序,以便显示视频的时长。最后,重复的计时器 用于更新当前时间。通过监听更多事件以及使用更多属性,可以进一步扩展这个自定义的视频播放器。 同样的代码也可以用于元素以创建自定义的音频播放器。

检测编解码器

如前所述,并不是所有浏览器都支持和的所有编解码器,这通常意味着必须提供 多个媒体源。为此,也有 JavaScript API 可以用来检测浏览器是否支持给定格式和编解码器。这两个媒 体元素都有一个名为 canPlayType()的方法,该方法接收一个格式/编解码器字符串,返回一个字符串 值:“probably”、“maybe"或”"(空字符串),其中空字符串就是假值,意味着可以在 if 语句中像这 样使用 canPlayType():

if (audio.canPlayType("audio/mpeg")) { // 执行某些操作
}

“probably"和"maybe"都是真值,在 if 语句的上下文中可以转型为 true。
在只给 canPlayType()提供一个 MIME 类型的情况下,最可能返回的值是"maybe"和空字符串。 这是因为文件实际上只是一个包装音频和视频数据的容器,而真正决定文件是否可以播放的是编码。在 同时提供 MIME 类型和编解码器的情况下,返回值的可能性会提高到"probably”。下面是几个例子:

let audio = document.getElementById("audio-player"); // 很可能是"maybe"
if (audio.canPlayType("audio/mpeg")) {
// 执行某些操作 }
// 可能是"probably"
 
 if (audio.canPlayType("audio/ogg; codecs=\"vorbis\"")) { // 执行某些操作
}

注意,编解码器必须放到引号中。同样,也可以在视频元素上使用 canPlayType()检测视频格式。

音频类型

元素还有一个名为 Audio 的原生 JavaScript 构造函数,支持在任何时候播放音频。Audio 类型与 Image 类似,都是 DOM 元素的对等体,只是不需插入文档即可工作。要通过 Audio 播放音频, 只需创建一个新实例并传入音频源文件:

let audio = new Audio("sound.mp3");
EventUtil.addHandler(audio, "canplaythrough", function(event) {
      audio.play();
    });

创建 Audio 的新实例就会开始下载指定的文件。下载完毕后,可以调用 play()来播放音频。
在 iOS 中调用 play()方法会弹出一个对话框,请求用户授权播放声音。为了连续播放,必须在 onfinish 事件处理程序中立即调用 play()。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值
>