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


Posted in Javascript onJanuary 03, 2017

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

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

Javascript 相关文章推荐
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
js Date自定义函数 延迟脚本执行
Mar 10 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
初识Javascript小结
Jul 16 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
JS求解三元一次方程组值的方法
Jan 03 #Javascript
Vue.js系列之项目结构说明(2)
Jan 03 #Javascript
Vue.js系列之项目搭建(1)
Jan 03 #Javascript
jquery实现下拉框多选方法介绍
Jan 03 #Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 #Javascript
详解JavaScript常量定义
Jan 03 #Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 #Javascript
You might like
PHP垃圾回收机制简单说明
2010/07/22 PHP
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
基于jquery的拖动布局插件
2011/11/25 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
ipython和python区别详解
2019/06/26 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
python属于软件吗
2020/06/18 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
全球性的女装店:storets
2019/06/12 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
先进事迹报告会主持词
2014/04/02 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
2015年保管员工作总结
2015/04/30 职场文书