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

更新时间：2017年01月03日 09:33:17 作者：依然仰望

本文主要介绍了JavaScript自定义媒体播放器的实现过程与方法，具有一定的参考作用，下面跟着小编一起来看下吧

使用<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>元素，以创建自定义的音频播放器。

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

您可能感兴趣的文章:

js
播放器

JS清除IE浏览器缓存的方法
本文为大家详细介绍下js中自动清除ie缓存的几种方法，大家可以根据自己的需求自由选择适合自己的，希望对大家学习js有所帮助
2013-07-07
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
这篇文章主要介绍了微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
JS前端开发之exec()和match()的对比使用
match()方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配,下面这篇文章主要给大家介绍了关于JS前端开发之exec()和match()的对比使用的相关资料,需要的朋友可以参考下
2022-09-09
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
才华横溢的Stoyan Stefanov，在他写的由O’Reilly初版的新书《JavaScript Patterns》(JavaScript模式)中，我想要是为我们的读者贡献其摘要，那会是件很美妙的事情
2012-01-01
JavaScript中的this基本问题实例小结
这篇文章主要介绍了JavaScript中的this基本问题,结合实例形式总结分析了JavaScript中this的功能、常见用法与操作注意事项,需要的朋友可以参考下
2020-03-03
js自定义事件代码说明
在研发公展公用后台的时候，用了许多的技巧性的JS，最有代表性就是如下这一例子.
2011-01-01
如何使用ImageDecoder API让GIF图片暂停播放
在本文中，我们介绍了如何使用ImageDecoder API来暂停GIF图像的播放，虽然这需要一些JavaScript编程知识，但它是一个非常强大的技术，可以让您对GIF图像进行各种高级操作，感兴趣的朋友跟随小编一起看看吧
2023-06-06
利用js+canvas实现扫雷游戏
这篇文章主要为大家详细介绍了利用js+canvas实现扫雷游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
浅谈微信JS-SDK 微信分享接口开发（介绍版）
这篇文章主要介绍了浅谈微信JS-SDK 微信分享接口开发（介绍版），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
JS中递归函数
编程语言中，函数Func(Type a,……)直接或间接调用函数本身，则该函数称为递归函数。递归函数不能定义为内联函数。这篇文章主要介绍了JS中递归函数的相关资料,需要的朋友可以参考下
2016-06-06