您的位置：首页 > Web前端 > HTML5
一个有趣的html5播放器

2016-03-29 17:25 459 查看
复制直接可以看片，反正我信了！

提示：先去下载一个mv，改变vodeo一下中src中的路径，就可以了。
<span style="font-size:14px;"><strong><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>html5 视频</title>
</head>

<style type="text/css">
li{list-style:none;color:#fff;}

a:hover{color:#f00;}

li:hover{color:#f00;cursor: pointer;}
</style>
<body >
<div style="background-color:#fff;width:1000px;height:600px;">
<div style="margin-left:20%;">
<header>
<div>
当前播放 ：<a > <!-- id="currentMovie" -->《画江湖之灵主》</a><br>
当前播放速度 ： <span id="currentSpeed">1X</span><br>
当前声音大小为 ：<span id="currentVolume">100</span><br>
</div>
</header>
<section>
<article>
<video style="float:left;"  id="testVideo" preload="metadata" src="/jiami/images/1.mp4" height="300"  controls>
你的浏览器不支持html5视频
</video>
<div style="float:left;background-color:rgb(48,48,48);width:200px;height:317px;overflow:scroll;">
<h4 style="color:rgb(166,166,166);font-weight:bold;width:200px;float:left;"><span>播放列表</span>   <span >集数列表</span></h4>
<hr>
<ul style="">
<li>喜洋洋灰太狼</li>
<li>蜡笔小新</li>
<li>龙珠</li>
<li>喜洋洋灰太狼</li>
<li>蜡笔小新</li>
</ul>
</div>
</article>
<article style="clear:both;">
<br/>

<button class="btn btn-primary" id="play">播放</button>
<button class="btn btn-primary"  id="pause">暂停</button>
<button class="btn btn-primary"  id="stop">停止</button>
<button class="btn btn-primary"  id="prev">下集</button>
<button class="btn btn-primary"  id="next">上集</button>
<button class="btn btn-primary"  id="upVolume">音量+</button>
<button class="btn btn-primary"  id="downVolume">音量-</button>
<button class="btn btn-primary"  id="fastFoward">快进</button>
<button class="btn btn-primary"  id="fastBackward">快退</button>
<br/>

<!-- 从<input type="text" id="min" style="width:20px;" value="0"/>分跳转到<input type="text" id="sec"  style="width:20px;" value="0"/>播放
<button id="locate">确认</button> -->
</article>
<section>
</div>
</div>
<script type="text/javascript">
var $  = function(id){return document.getElementById(id);};
var _video = $("testVideo");

//视频列表
　　　　　　　var playList = {
current : 0,
list : ["画江湖之灵主.ogg","war3.ogg","movie.ogv","trailer.webm","trailer.ogv"]
}

var videoUtil = {
//播放
play : function(){
_video.play();
},
//暂停
pause : function(){
_video.pause();
},
//停止
stop : function(){
_video.currentTime = 0;
_video.pause();
},
//下一个视频
next : function(){
if(playList.current == playList.list.length-1){
playList.current = 0;
}else{
playList.current++;
}
_video.src=playList.list[playList.current];
_video.play();
},
//前一个视频
prev : function(){
if(playList.current == 0){
playList.current = palyList.list.length-1;
}else{
playList.current--;
}
_video.src=playList.list[playList.current];
_video.play();
},
//加大声音,每次加大1/10
upVolume : function(){
_video.volume += 0.1;
},
//减小声音，每次减小1/10
downVolume : function(){
_video.volume -= 0.1;
},
//翻倍加快播放速度
fastFoward : function(){
//FF不支持playbackRate
　　　　　　　　　　　　if(_video.playbackRate){
_video.playbackRate = _video.playbackRate*2;
}else{
alert("对不起，你的浏览器不支持改变播放速度！");
}

},
//降低播放速度
fastBackward : function(){
if(_video.playbackRate){
_video.playbackRate = _video.playbackRate/2;
}else{
alert("对不起，你的浏览器不支持改变播放速度！");
}
},
//跳转到指定时间点播放
locate : function(){
var min = $("min").value;
var sec = $("sec").value;
var time = parseInt(min)*60+parseInt(sec);
_video.currentTime = time;
_video.play();
},
bindEvent : function(){
var self = this;

//绑定页面上各个按钮的事件
　　　　　　　　　　　　var btns = document.getElementsByTagName("button");
for(var i = 0 ;i < btns.length ; i++){
var el = btns[i];
el.onclick = self[el.id];
}

//播放完毕自动播放下一个
_video.onended = function(){
var event = document.createEvent("HTMLEvents");
event.initEvent('click', true, true);
$("next").dispatchEvent(event);
}

//循环检查视频的当前状态
setInterval(function(){
var speed = _video.playbackRate||1;
var movie = "movie"+playList.current;
var volume = parseInt(_video.volume*100);
$("currentMovie").innerHTML = movie;
$("currentSpeed").innerHTML = speed+"X";
$("currentVolume").innerHTML = volume;
},200);

}
};

window.onload = function(){
videoUtil.bindEvent();
}

</script>
</body>
</html></strong></span>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航