用HTML 5视频插入video元素播放多个视频

寒冬残荷

我有的这个代码可以自动连续播放，但不能像您的那样有视频清单且可以想看哪一个就点击那一个。

195400

华妹 发表于 2021-6-4 21:46 我有的这个代码可以自动连续播放，但不能像您的那样有视频清单且可以想看哪一个就点击那一个。

195400

循环播放 + 点播

毕竟是老年人自娱自乐用不着花里胡哨的功能吧

寒冬残荷

195400 发表于 2021-6-5 07:46
var videoArray = [
                ["http://url.amp3a.com/youku.php/XNDQzNTIxNjE ...

谢谢！谢谢！您真的真的是高手呀！我不敢说JavaScript你是最厉害的，但我说你是有时间来论坛玩最厉害的！我在网上看着学了几句HTML语句，CSS和JavaScript怎么看都不懂。老了上网太久眼睛和颈椎痛，所以也不能像年轻时那样拼命学习……

寒冬残荷

195400 发表于 2021-6-5 07:47
循环播放 + 点播

毕竟是老年人自娱自乐用不着花里胡哨的功能吧

是的，我也不喜欢花里胡哨的东西，只是练习，试看该语句（或属性）运行结果……

195400

慢慢看、慢慢揣摩总会有所心得的，不工作了总得找点事干消磨时间对吧。

1. <!--       外框    -->
   
2. <div id="playframe" style="width:800px;height:auto !imprtant;margin:16px auto;position:relative;
   
3. overflow:hidden;border:12px brown solid;border-radius:12px;min-height:320px;font-size:16px;">
   
4. <!--        播放标签 video    -->
   
5. <video id="mPlayer" controls autoplay type="video/mp4" width='100%'></video>
   
6. <!--         菜单列表    -->
   
7. <ol style="width:280px;height:200px;color:blue;position:absolute;left:30px;top:24px;font-weight:bold;cursor:pointer;">
   
8. </ol>
   
9. </div>
   
10. 
    
11. <script type="text/javascript">
    
12.         var videoArray = [        //        歌曲视频参数组
    
13.                 ["http://url.amp3a.com/youku.php/XNDQzNTIxNjE4OA==.mp4", "《我的中国梦..》"],  
    
14.                 ["http://url.amp3a.com/youku.php/XNDk2MDY0OTQ1Ng==.mp4", "《我们这一辈》--- 王佑贵"],  
    
15.                 ["http://url.amp3a.com/youku.php/XNTE2MDAwMzAzNg==.mp4", "《山路十八弯》--- 李琼"],  
    
16.                 ["http://url.amp3a.com/youku.php/XNDE5NzM3NTQ0OA==.mp4", "《渴望》 --- 毛阿敏"],  
    
17.                 ["http://url.amp3a.com/youku.php/XMzc2NzU3NjUwMA==.mp4", "《青藏高原》 --- 韩红"],  
    
18.                 ["http://url.amp3a.com/youku.php/XNDkzMTE3NDcyMA==.mp4", "《可可托海的牧羊人》--- 亚男"],  
    
19.                 ["http://url.amp3a.com/youku.php/XNTA0Njg3OTM2NA==.mp4", "《送亲》--- 亚男"],  
    
20.                 ["http://url.amp3a.com/youku.php/XNTE1NTM1MTU0OA==.mp4", "《知青之歌》"]
    
21.         ];
    
22.         //        初始化菜单
    
23.         var items = new Array();
    
24.         var olObj = document.querySelector('#playframe ol');
    
25.         for(i = 0 ; i < videoArray.length; i++)        {
    
26.                 oli = document.createElement('li');
    
27.                 oTxt = document.createTextNode(videoArray[i][1]);
    
28.                 oli.appendChild(oTxt);
    
29.                 olObj.appendChild(oli);
    
30.                 items[i] = oli;
    
31.         }
    
32.         // 初始化播放参数
    
33.         var player = document.querySelector('#mPlayer');
    
34.         var curIdx = 0;
    
35.         player.focus();
    
36.         player.src = videoArray[curIdx][0];
    
37.         items[curIdx].style.color = 'red';
    
38.         //        一曲播放完的事件处理
    
39.         player.onended = function()        {
    
40.                 items[curIdx].style.color = 'blue';
    
41.                 player.pause();
    
42.                 curIdx++;
    
43.                 if(curIdx >= items.length) curIdx = 0;
    
44.                 player.src = videoArray[curIdx][0];
    
45.                 items[curIdx].style.color = 'red';
    
46.                 player.play();
    
47.         }
    
48.         //        每个菜单项添加点击事件处理
    
49.         for(n = 0; n < items.length; n++)        {
    
50.                 items[n].onclick = function()        {
    
51.                         player.pause();
    
52.                         items[curIdx].style.color = 'blue';
    
53.                         for(j = 0; j < items.length; j++)        {
    
54.                                 if(this.innerHTML == videoArray[j][1])        {
    
55.                                         player.src = videoArray[j][0];
    
56.                                         this.style.color = 'red';
    
57.                                         curIdx = j;
    
58.                                         break;
    
59.                                 }
    
60.                         }
    
61.                         player.play();
    
62.                 }
    
63.         }
    
64. </script>

复制代码

西椅子胡同

鼓掌献花

195400

西椅子胡同 发表于 2021-6-5 10:09
鼓掌献花

寒冬残荷

195400 发表于 2021-6-5 09:22
慢慢看、慢慢揣摩总会有所心得的，不工作了总得找点事干消磨时间对吧。

哈哈，照搬我还是会的。小时候读书经常抄别人的作业。

红枫

195400 发表于 2021-6-5 09:22
慢慢看、慢慢揣摩总会有所心得的，不工作了总得找点事干消磨时间对吧。

最好能弄一个 显示/隐藏  播放列表的按钮，这样看视频时就不会受列表文字的遮挡了。拙见。