AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
js,播放器

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

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


js,播放器  
上一篇:Vue.js系列之vue-router(上)(3)  下一篇:JS求解三元一次方程组值的方法