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 相关文章推荐
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
jQuery对表单的操作代码集合
Apr 06 Javascript
Javascript学习笔记 delete运算符
Sep 13 Javascript
js倒计时小程序
Nov 05 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 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.ini中文版(2)
2006/10/09 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
如何让页面加载完成后执行js
2013/06/26 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
简单了解python协程的相关知识
2019/08/31 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
pycharm永久激活超详细教程
2020/10/29 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
介绍一下write命令
2014/08/10 面试题
教师专业自荐书范文
2014/02/10 职场文书
公司合作意向书
2014/04/01 职场文书
爱国演讲稿400字
2014/05/07 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
领导干部考核评语
2015/01/04 职场文书
试用期自我评价范文
2015/03/10 职场文书
黄埔军校观后感
2015/06/10 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android
设置IIS Express并发数
2022/07/07 Servers