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

JavaScript实现自定义媒体播放器方法介绍

程序员文章站 2022-06-01 15:13:17
使用

使用<audio>和<video>元素的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>

以上基本的html 再加上一些javascript 就可以变成一个简单的视频播放器。以下就是javascript代码。

window.onload=function(){
  var player = document.getelementbyid("player"),
  obtn = document.getelementbyid("video-btn"),
  curtime = document.getelementbyid("curtime"),
  duration = document.getelementbyid("duration");
  //更新播放时间
  duration.innerhtml = player.duration;
  obtn.onclick = function(){
    if (player.paused){
      player.play();
      obtn.value = "pause";
    } 
    else {
      player.pause();
      obtn.value = "play";
    }
  }
  //定时更新当前时间
  setinterval(function(){
    curtime.innerhtml = player.currenttime;
  }, 250);
}

以上javascript 代码给按钮添加了一个事件处理程序,单击它能让视频在暂停时播放,在播放时暂停。通过<video>元素的load 事件处理程序,设置了加载完视频后显示播放时间。最后,设置了一个计时器,以更新当前显示的时间。你可以进一步扩展这个视频播放器,监听更多事件,利用更多属性。而同样的代码也可以用于<audio>元素,以创建自定义的音频播放器。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!