欣赏佳作，赞一个！
红枫 发表于 2021-6-5 14:49
最好能弄一个 显示/隐藏播放列表的按钮，这样看视频时就不会受列表文字的遮挡了 ...
只是个简单的播放视频的小程序没考虑那么多的细节，不过要加上菜单的隐藏/显示并不很为难。
<style type="text/css">
#playframe {
width:1000px;height:auto !imprtant;
margin:100px auto 32px -100px;
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 = '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(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.onmouseover = function() {
divObj.style.visibility = 'visible';
}
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>
菜单隐藏起来也有不方便的毛病： 一是不能直观的知道正在播放的视频的title， 二是如果不做说明就不知道菜单如何唤出。
就现在来说，鼠标进入画面就可显示出菜单，您有什么好建议唤出菜单望不吝赐教。
雄鹰翱翔 发表于 2021-6-5 15:40
欣赏佳作，赞一个！
http://www.yinhuabbs.cn/data/attachment/forum/201912/21/084305tld7qqre89lhihhh.gif
195400 发表于 2021-6-5 16:50
菜单隐藏起来也有不方便的毛病： 一是不能直观的知道正在播放的视频的title， 二是如果不做说明就不知道菜 ...
为您点赞！这样很好，正在播放的视频的title，把鼠标放到视频的左上角就可知道，这是网上很多播放器都这样，可以说是“共识”吧！至于不知道有无菜单，同样是“共识”，鼠标在视频上移动有无显示就知道。若有一按钮，点击时开关菜单就更完美了。再一个就是当视频的title数超个“盒子”的高度时看不到title了（见我空间的CCTV12……），能否做成上下拉动的菜单条？
华妹 发表于 2021-6-5 21:17
为您点赞！这样很好，正在播放的视频的title，把鼠标放到视频的左上角就可知道，这是网上很多播放器都这 ...
若有一按钮，点击时开关菜单就更完美了
我认为按钮方案不可取，理由是按钮放在画面上一样是遮挡画面，而放在画面外则整体性就破坏了。
现在菜单项可以拉动选择，偷了点懒把相同的歌曲复制了一遍只是为了示意拖动菜单是可能的。
195400 发表于 2021-6-5 22:07
我认为按钮方案不可取，理由是按钮放在画面上一样是遮挡画面，而放在画面外则整体性就破坏了。
现 ...
为你点赞！{:1_293:}{:1_293:}{:1_293:}太完美了！现在只要鼠标放到视频内菜单就出现，离开视频就隐藏。在我人个人空间试了，我的46个视频标题都看到了。
华妹 发表于 2021-6-5 23:14
为你点赞！太完美了！现在只要鼠标放到视频内菜单就出现，离开视频就隐藏。 ...
只需添加视频地址和名称多少个无差别
195400 发表于 2021-6-5 16:50
菜单隐藏起来也有不方便的毛病： 一是不能直观的知道正在播放的视频的title， 二是如果不做说明就不知道菜 ...
我感觉你这样的处理比用按钮效果更好。赞一个！