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

以上是 JavaScript实现自定义媒体播放器方法介绍 的全部内容, 来源链接: utcz.com/z/335154.html

回到顶部