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 相关文章推荐
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
Javascript学习笔记一 之 数据类型
Dec 15 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
基于jQuery ligerUI实现分页样式
Sep 18 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 Javascript
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
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
2019十大人气国漫
2020/03/13 国漫
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
javascript 常用方法总结
2009/06/03 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
python numpy元素的区间查找方法
2018/11/14 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
Python进程池Pool应用实例分析
2019/11/27 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
python自定义函数def的应用详解
2020/06/03 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
汽车广告策划方案
2014/05/31 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
护士求职自荐信
2015/03/25 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL