javascript基础学习系列四百八十九：自定义媒体播放器

最新推荐文章于 2024-10-10 10:50:43 发布

完美句号

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量425

点赞数 4

文章标签： javascript 学习开发语言算法数据结构系统架构架构

本文链接：https://blog.csdn.net/wanmeijuhao/article/details/136242568

版权

使用和的 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 17 类型与 Image 类似，都是 DOM 元素的对等体，只是不需插入文档即可工作。要通过 Audio 播放音频，只需创建一个新实例并传入音频源文件:

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

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

原生拖放

IE4 最早在网页中为 JavaScript 引入了对拖放功能的支持。当时，网页中只有两样东西可以触发拖 21 放:图片和文本。拖动图片就是简单地在图片上按住鼠标不放然后移动鼠标。而对于文本，必须先选中，然后再以同样的方式拖动。在 IE4 中，唯一有效的放置目标是文本框。IE5 扩展了拖放能力，添加了新的事件，让网页中几乎一切都可以成为放置目标。IE5.5 又进一步，允许几乎一切都可以拖动(IE6 也支持这个功能)。HTML5 在 IE 的拖放实现基础上标准化了拖放功能。所有主流浏览器都根据 HTML5 规范实现了原生的拖放。
关于拖放最有意思的可能就是可以跨窗格、跨浏览器容器，有时候甚至可以跨应用程序拖动元素。
浏览器对拖放的支持可以让我们实现这些功能。