javascript实现简单的html5视频播放器
版权申诉
166 浏览量
2020-10-24
07:01:03
上传
评论 1
收藏 40KB PDF 举报
javascript实现简单的实现简单的html5视频播放器视频播放器
网页视频音频播放器大家并不陌生，在IE中我们可以运行ActiveX来嵌入微软的Media Player或者其他的本地播
放器，当然可能大部分我们都是使用Flash来制作播放器。在HTML5发展迅速的今天，让我们尝试用HTML5来
制作网页播放器吧，毕竟无论是PC还是移动设备，HTML5是未来的趋势
效果：
代码很简单
js
define("html5_video_player", [ '../avalon-min'], function(avalon) {
function formatTime(seconds) {
var seconds = Math.round(seconds);
var minutes = Math.floor(seconds / 60);
seconds = Math.floor(seconds % 60);
minutes = (minutes >= 10) ? minutes : "0" + minutes;
seconds = (seconds >= 10) ? seconds : "0" + seconds;
return minutes + ":" + seconds;
}
var playing=false,mute=false,vol=50,fs=false,active=false,inactivityTimeout=timer=null;
avalon.bind($('control_btn'),'click',function(){
if(!playing){
$('html5_video').play();
$('control_btn').className='html5_video_pause_btn inline-block';
playing=true;
}else{
$('html5_video').pause();
$('control_btn').className='html5_video_play_btn inline-block';
playing=false;
}
});
avalon.bind($('video_bar'),'click',function(e){
var a=(e.clientX-$('video_bar').offsetLeft)/$('video_bar').offsetWidth;
$('html5_video').currentTime =a.toFixed(2)*$('html5_video').duration;
});
avalon.bind($('vol_bar'),'click',function(e){
var a=(e.clientX-$('vol_bar').offsetLeft-8)/$('vol_bar').offsetWidth;
vol=$('html5_video').volume =a;
$('vol_value').style.width=a*100+'%';
});
avalon.bind($('mute_icon'),'click',function(){
if(!mute){
$('html5_video').volume=0;
$('mute_icon').className='html5_video_mute1';
mute=true;
}else{
$('html5_video').volume=vol;
$('mute_icon').className='html5_video_mute';
mute=false;
}
});
avalon.bind($('html5_video'),'loadedmetadata',function(){
$('html5_video_duration').innerHTML=formatTime($('html5_video').duration);
$('html5_video').volume=0;
});
avalon.bind($('html5_video'),'timeupdate',function(){
$('html5_play_time').innerHTML=formatTime($('html5_video').currentTime);
$('video_progress_bar').style.left=$('html5_video').currentTime/$('html5_video').duration*100+'%';
});
avalon.bind($('html5_video_fullscreen'),'click',function(e){
if(!fs){
toggle_fullscreen();
}else{
exit_fullscreen();
}
});
document.onmozfullscreenchange = function() {
if ($('html5_video').clientWidth +2!= document.documentElement.clientWidth) {
exit_fullscreen();
}
};
document.onwebkitfullscreenchange = function() {
if ($('html5_video').clientWidth!= document.documentElement.clientWidth) {
评论0
最新资源