【中画网十四周年庆】为梦想努力(孙子体训)
<style type="text/css">#playframe {
width:1000px;height:auto !imprtant;
margin:100px auto 32px -180px;
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:16px;
font-weight:bold;
}
</style>
<div id="playframe" style="">
</div>
<script type="text/javascript">
var videoArray = [ // 歌曲视频参数组
["http://url.amp3a.com/youku.php/XNTE0NzMwMzAyOA==.mp4", "练跑"],
["http://url.amp3a.com/youku.php/XNTE0Nzc0NjgyOA==.mp4", "练跳远"],
["http://url.amp3a.com/youku.php/XNTE0NzMwMzAyNA==.mp4", "练举重"],
["http://url.amp3a.com/youku.php/XNTE0NzMwMzAyMA==.mp4", " 练臂力"],
["http://url.amp3a.com/youku.php/XNTE0Nzc0NjgxNg==.mp4", " 练球1"],
["http://url.amp3a.com/youku.php/XNTE0NzMwMzAzNg==.mp4", " 练球2"],
["http://url.amp3a.com/youku.php/XNTE0Nzc0NjgyMA==.mp4", " 练球3"],
];
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 = '200px';
divObj.style.position = 'absolute';
divObj.style.left = '30px';
divObj.style.top = '20px';
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(k = 0 ; k < opts.videoParas.length; k++) {
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>
最好的时候祝愿前程似锦 香染 发表于 2021-11-30 19:10
最好的时候祝愿前程似锦
问好香染老师,谢谢点评鼓励! 欣赏一下,谢谢。 这特效眼前一亮啊 云师好久不见啊,祝福你孙子前程似锦 诺北 发表于 2021-12-1 08:44
这特效眼前一亮啊
问好诺北老师,谢谢点评鼓励! 诺北 发表于 2021-12-1 08:44
云师好久不见啊,祝福你孙子前程似锦
诺北管理员老师您太忙了,我还是天天来中画网,看得多,发帖少。谢谢您的祝福与点评鼓励!
恭喜老先生 跟帖同贺中画十四周年
页:
[1]
2