我有的这个代码可以自动连续播放，但不能像您的那样有视频清单且可以想看哪一个就点击那一个。
华妹 发表于 2021-6-4 21:46
我有的这个代码可以自动连续播放，但不能像您的那样有视频清单且可以想看哪一个就点击那一个。
<div id="playframe" style="width:800px;height:auto !imprtant;margin:16px auto;position:relative;
overflow:hidden;border:12px brown solid;border-radius:12px;min-height:320px;">
<video id="mPlayer" src='http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' controls autoplay type="video/mp4" width='100%'></video>
<ol style="width:280px;height:200px;color:blue;position:absolute;left:30px;top:24px;font-weight:bold;cursor:pointer;font-size:16px;">
<li class='items' ></li>
<li class='items' ></li>
<li class='items' ></li>
<li class='items' ></li>
<li class='items' ></li>
<li class='items' ></li>
<li class='items' ></li>
<li class='items' ></li>
</ol>
</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/XNTA0Njg3OTM2NA==.mp4", "《送亲》--- 亚男"],
["http://url.amp3a.com/youku.php/XNTE1NTM1MTU0OA==.mp4", "《知青之歌》"]
];
var items = document.getElementsByClassName("items");
var player = document.querySelector('#mPlayer');
player.focus();
player.src = videoArray;
var curIdx = 0;
items.style.color = 'red';
player.onended = function() {
items.style.color = 'blue';
player.pause();
curIdx++;
if(curIdx >= items.length) curIdx = 0;
player.src = videoArray;
items.style.color = 'red';
player.play();
}
for(n = 0; n < items.length; n++) {
var txtNode = document.createTextNode(videoArray);
items.appendChild(txtNode);
items.onclick = function() {
player.pause();
items.style.color = 'blue';
for(j = 0; j < items.length; j++) {
if(this.innerHTML == videoArray) {
player.src = videoArray;
this.style.color = 'red';
curIdx = j;
break;
}
}
player.play();
}
}
</script>
循环播放 + 点播
毕竟是老年人自娱自乐用不着花里胡哨的功能吧
195400 发表于 2021-6-5 07:46
var videoArray = [
["http://url.amp3a.com/youku.php/XNDQzNTIxNjE ...
谢谢！谢谢！:handshake您真的真的是高手呀！我不敢说JavaScript你是最厉害的，但我说你是有时间来论坛玩最厉害的！我在网上看着学了几句HTML语句，CSS和JavaScript怎么看都不懂。老了上网太久眼睛和颈椎痛，所以也不能像年轻时那样拼命学习……:lol
195400 发表于 2021-6-5 07:47
循环播放 + 点播
毕竟是老年人自娱自乐用不着花里胡哨的功能吧
是的，我也不喜欢花里胡哨的东西，只是练习，试看该语句（或属性）运行结果……:lol
慢慢看、慢慢揣摩总会有所心得的，不工作了总得找点事干消磨时间对吧。
<!-- 外框 -->
<div id="playframe" style="width:800px;height:auto !imprtant;margin:16px auto;position:relative;
overflow:hidden;border:12px brown solid;border-radius:12px;min-height:320px;font-size:16px;">
<!-- 播放标签 video -->
<video id="mPlayer" controls autoplay type="video/mp4" width='100%'></video>
<!-- 菜单列表 -->
<ol style="width:280px;height:200px;color:blue;position:absolute;left:30px;top:24px;font-weight:bold;cursor:pointer;">
</ol>
</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/XNTA0Njg3OTM2NA==.mp4", "《送亲》--- 亚男"],
["http://url.amp3a.com/youku.php/XNTE1NTM1MTU0OA==.mp4", "《知青之歌》"]
];
// 初始化菜单
var items = new Array();
var olObj = document.querySelector('#playframe ol');
for(i = 0 ; i < videoArray.length; i++) {
oli = document.createElement('li');
oTxt = document.createTextNode(videoArray);
oli.appendChild(oTxt);
olObj.appendChild(oli);
items = oli;
}
// 初始化播放参数
var player = document.querySelector('#mPlayer');
var curIdx = 0;
player.focus();
player.src = videoArray;
items.style.color = 'red';
// 一曲播放完的事件处理
player.onended = function() {
items.style.color = 'blue';
player.pause();
curIdx++;
if(curIdx >= items.length) curIdx = 0;
player.src = videoArray;
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 == videoArray) {
player.src = videoArray;
this.style.color = 'red';
curIdx = j;
break;
}
}
player.play();
}
}
</script>
鼓掌献花
西椅子胡同 发表于 2021-6-5 10:09
鼓掌献花
http://www.yinhuabbs.cn/data/attachment/forum/201912/20/123059ffon6y9p6tnedvne.gif
195400 发表于 2021-6-5 09:22
慢慢看、慢慢揣摩总会有所心得的，不工作了总得找点事干消磨时间对吧。
哈哈，照搬我还是会的。:lol小时候读书经常抄别人的作业。
195400 发表于 2021-6-5 09:22
慢慢看、慢慢揣摩总会有所心得的，不工作了总得找点事干消磨时间对吧。
最好能弄一个 显示/隐藏播放列表的按钮，这样看视频时就不会受列表文字的遮挡了。拙见。