html5视频代码播放器
<style type="text/css">#playframe {
width:1000px;height:auto !imprtant;
margin:100px auto 32px -170px;
position:relative;
background:gray url(http://www.hitow.net/data/attachment/album/201603/29/130457ouulphaq9pnpqiu7.jpg) 0 0 / cover;
overflow:hidden;
border:12px brown ridge;
border-radius:12px;
min-height:320px;
font-size:24px;
font-weight:bold;
}
</style>
<div id="playframe" style="">
</div>
<script type="text/javascript">
var videoArray = [ // 歌曲视频参数组
["http://url.amp3a.com/youku.php/XNDQzNTIxNjE4OA==.mp4", "《我的中国梦..》"],
["http://url.amp3a.com/youku.php/XNDk2MDY0OTQ1Ng==.mp4", "《我们这一辈》--- 王佑贵"],
["http://url.amp3a.com/youku.php/XNTE2MDAwMzAzNg==.mp4", "《山路十八弯》--- 李琼"],
["http://url.amp3a.com/youku.php/XNDE5NzM3NTQ0OA==.mp4", "《渴望》 --- 毛阿敏"],
["http://url.amp3a.com/youku.php/XMzc2NzU3NjUwMA==.mp4", "《青藏高原》 --- 韩红"],
["http://url.amp3a.com/youku.php/XNDkzMTE3NDcyMA==.mp4", "《可可托海的牧羊人》--- 亚男"],
["http://url.amp3a.com/youku.php/XNDQ2ODQzMjk3Mg==.mp4", "《葬花吟》--- 陈力"],
["http://url.amp3a.com/youku.php/XNTA0Njg3OTM2NA==.mp4", "《送亲》--- 亚男"],
["http://url.amp3a.com/youku.php/XNDAzNDA3MTc0NA==.mp4", "《喜欢你》--- 边巴德吉"],
["http://url.amp3a.com/youku.php/XMzQ3MDczOTEwOA==.mp4", "《时间都去哪儿了》--- 姚贝娜"],
["http://url.amp3a.com/youku.php/XNDY2NDMzNjczNg==.mp4", "《大海航行靠舵手》--- 贾世骏"],
["http://url.amp3a.com/youku.php/XNDI5NjM1NDU2MA==.mp4", "《我和我的祖国》--- 殷秀梅"],
["http://url.amp3a.com/youku.php/XNDIxNzQ1NDY5Ng==.mp4", "《西海情歌》--- 降央卓玛"],
["http://url.amp3a.com/youku.php/XNTE1MTQ2MTIyMA==.mp4", "《北京的金山上》--- 才旦卓玛"],
["http://url.amp3a.com/youku.php/XNDk2NDk2NTQwMA==.mp4", "《唱支山歌给党听》--- 才旦卓玛"],
["http://url.amp3a.com/youku.php/XMzUyNzMwMjE4MA==.mp4", "《再唱山歌给党听》--- 降央卓玛"],
["http://url.amp3a.com/youku.php/XNDQ5NTg4MzE0MA==.mp4", "《妻子辛苦了》--- 龚玥"],
["http://url.amp3a.com/youku.php/XNDI0MTIyMjI2MA==.mp4", "《妻子》--- 谭晶"],
// ["https://vd2.bdstatic.com/mda-jjiv8b6bz3y9mn2y/sc/mda-jjiv8b6bz3y9mn2y.mp4", "《那一天》--- 降央卓玛"],
["http://url.amp3a.com/youku.php/XNTE1NTM1MTU0OA==.mp4", "《知青之歌》"]
];
var opts = {
videoParas:videoArray,
frameID:"playframe"
};
function playMP4(opts) {
var dFrame = document.getElementById(opts.frameID);
// 建一个 Video
var player = document.createElement('video');
player.style.width = "100%";
player.controls = true;
player.autoplay = true;
dFrame.appendChild(player);
// 建一个菜单列表
var divObj = document.createElement('div');
divObj.style.width = '400px';
divObj.style.height = '210px';
divObj.style.position = 'absolute';
divObj.style.left = '30px';
divObj.style.top = '30px';
divObj.style.overflowY = 'auto';
divObj.style.overflowX = 'hidden';
divObj.style.visibility = 'hidden';
divObj.style.scrollbarWidth = 'thin';
var olObj = document.createElement('ol');
olObj.style.width = '100%';
olObj.height = '100%';
olObj.style.color = 'blue';
olObj.style.cursor = 'pointer';
// 初始化菜单项
var items = new Array();
for(i = 0 ; i < opts.videoParas.length; i++) {
oli = document.createElement('li');
oTxt = document.createTextNode(opts.videoParas);
oli.appendChild(oTxt);
olObj.appendChild(oli);
items = oli;
}
divObj.appendChild(olObj);
dFrame.appendChild(divObj);
//
dFrame.addEventListener('touchstart',function(){
divObj.style.visibility = 'visible';
});
dFrame.onmouseover = function() {
divObj.style.visibility = 'visible';
}
dFrame.addEventListener('gesturechange',function(){
divObj.style.visibility = 'hidden';
});
dFrame.onmouseout = function() {
divObj.style.visibility = 'hidden';
}
// 一曲播放完的事件处理
player.onended = function() {
items.style.color = 'blue';
player.pause();
curIdx++;
if(curIdx >= items.length) curIdx = 0;
player.src = opts.videoParas;
items.style.color = 'red';
player.play();
}
// 每个菜单项添加点击事件处理
for(n = 0; n < items.length; n++) {
items.onclick = function() {
player.pause();
items.style.color = 'blue';
for(j = 0; j < items.length; j++) {
if(this.innerHTML == opts.videoParas) {
player.src = opts.videoParas;
this.style.color = 'red';
curIdx = j;
break;
}
}
player.play();
}
}
// 初始化播放参数
var curIdx = 0;
player.focus();
player.src = opts.videoParas;
items.style.color = 'red';
}
playMP4(opts);
</script>
页:
[1]