中畫網

標題: 用HTML 5視頻插入video元素播放多個視頻 [打印本頁]
作者: 寒冬殘荷    時間: 2021-6-2 22:59
標題: 用HTML 5視頻插入video元素播放多個視頻



視頻目錄:（想觀看哪一個視頻就點擊該視頻的名稱）

　　1、動畫片
　　2、馴龍高手
　　3、緊急救援
　　4、玩具總動員
　　5、無限動力
　　6、鋼鐵俠
　　7、電影英雄出少年片段
　　8、娘子軍連歌

作者: 紅楓    時間: 2021-6-3 17:21
代碼簡單而實用，贊一個！ 只是現今視頻實際地址的獲得已是越來越難了。
作者: 寒冬殘荷    時間: 2021-6-3 17:51
紅楓 發(fā)表于 2021-6-3 17:21
代碼簡單而實用，贊一個！ 只是現今視頻實際地址的獲得已是越來越難了。

感謝老師臨帖指導！我這只是想學代碼而做的練習而已。老了沒有愛好很無聊，學點東西防老癡。
作者: 195400    時間: 2021-6-3 21:21


只有第一個和最后一個可播放。

作者: 寒冬殘荷    時間: 2021-6-3 21:46
195400 發(fā)表于 2021-6-3 21:21
只有第一個和最后一個可播放。

感謝老師臨帖指導！
MP4地址是隨便從網上找來的。除最后一個是央視的能正常鏈接，其它的一般晚上鏈接打不開。
作者: 195400    時間: 2021-6-4 11:20
華妹 發(fā)表于 2021-6-3 21:46 感謝老師臨帖指導！ MP4地址是隨便從網上找來的。除最后一個是央視的能正常鏈接，其它的一般晚上鏈接打 ...
其實所有的視頻鏈接都是正常的，只是video標簽只能播放特定編碼格式（H264）的MP4視頻。
保留了第二個不能正常播放的視頻。
作者: 寒冬殘荷    時間: 2021-6-4 14:09
195400 發(fā)表于 2021-6-4 11:20
其實所有的視頻鏈接都是正常的，只是video標簽只能播放特定編碼格式（H264）的MP4視頻。

大俠級！我以為video能播放所有的MP4視頻。我沒有學過代碼，只是在論壇看了大家的貼模仿練習的，讓大俠見笑了！大俠可以教教我嗎？
作者: 195400    時間: 2021-6-4 15:18
華妹 發(fā)表于 2021-6-4 14:09
大俠級！我以為video能播放所有的MP4視頻。我沒有學過代碼，只是在論壇看了 ...

作者: 寒冬殘荷    時間: 2021-6-4 21:43
195400 發(fā)表于 2021-6-4 15:18

幫我把你的代碼改成播放完后自動連續(xù)播放下一個視頻。這樣我就把我喜歡的視頻放在一起，有時間時連續(xù)看或想看哪一個就點哪一個。可以嗎？
作者: 寒冬殘荷    時間: 2021-6-4 21:44


作者: 寒冬殘荷    時間: 2021-6-4 21:46
我有的這個代碼可以自動連續(xù)播放，但不能像您的那樣有視頻清單且可以想看哪一個就點擊那一個。
作者: 195400    時間: 2021-6-5 07:46
華妹 發(fā)表于 2021-6-4 21:46 我有的這個代碼可以自動連續(xù)播放，但不能像您的那樣有視頻清單且可以想看哪一個就點擊那一個。
作者: 195400    時間: 2021-6-5 07:47
循環(huán)播放 + 點播

畢竟是老年人自娛自樂用不著花里胡哨的功能吧

作者: 寒冬殘荷    時間: 2021-6-5 08:14
195400 發(fā)表于 2021-6-5 07:46
var videoArray = [
                ["http://url.amp3a.com/youku.php/XNDQzNTIxNjE ...

謝謝！謝謝！您真的真的是高手呀！我不敢說JavaScript你是最厲害的，但我說你是有時間來論壇玩最厲害的！我在網上看著學了幾句HTML語句，CSS和JavaScript怎么看都不懂。老了上網太久眼睛和頸椎痛，所以也不能像年輕時那樣拼命學習……
作者: 寒冬殘荷    時間: 2021-6-5 08:17
195400 發(fā)表于 2021-6-5 07:47
循環(huán)播放 + 點播

畢竟是老年人自娛自樂用不著花里胡哨的功能吧

是的，我也不喜歡花里胡哨的東西，只是練習，試看該語句（或屬性）運行結果……
作者: 195400    時間: 2021-6-5 09:22
慢慢看、慢慢揣摩總會有所心得的，不工作了總得找點事干消磨時間對吧。
  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>

  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>
復制代碼



作者: 西椅子胡同    時間: 2021-6-5 10:09
鼓掌獻花
作者: 195400    時間: 2021-6-5 10:14
西椅子胡同 發(fā)表于 2021-6-5 10:09
鼓掌獻花


作者: 寒冬殘荷    時間: 2021-6-5 10:47
195400 發(fā)表于 2021-6-5 09:22
慢慢看、慢慢揣摩總會有所心得的，不工作了總得找點事干消磨時間對吧。

哈哈，照搬我還是會的。小時候讀書經常抄別人的作業(yè)。
作者: 紅楓    時間: 2021-6-5 14:49
195400 發(fā)表于 2021-6-5 09:22
慢慢看、慢慢揣摩總會有所心得的，不工作了總得找點事干消磨時間對吧。



最好能弄一個 顯示/隱藏  播放列表的按鈕，這樣看視頻時就不會受列表文字的遮擋了。拙見。
作者: 雄鷹翱翔    時間: 2021-6-5 15:40
欣賞佳作，贊一個！
作者: 195400    時間: 2021-6-5 16:44
紅楓 發(fā)表于 2021-6-5 14:49
最好能弄一個 顯示/隱藏  播放列表的按鈕，這樣看視頻時就不會受列表文字的遮擋了 ...

只是個簡單的播放視頻的小程序沒考慮那么多的細節(jié)，不過要加上菜單的隱藏/顯示并不很為難。
作者: 195400    時間: 2021-6-5 16:44
作者: 195400    時間: 2021-6-5 16:50
菜單隱藏起來也有不方便的毛病： 一是不能直觀的知道正在播放的視頻的title， 二是如果不做說明就不知道菜單如何喚出。

就現在來說，鼠標進入畫面就可顯示出菜單，您有什么好建議喚出菜單望不吝賜教。
作者: 195400    時間: 2021-6-5 16:51
雄鷹翱翔 發(fā)表于 2021-6-5 15:40
欣賞佳作，贊一個！



作者: 寒冬殘荷    時間: 2021-6-5 21:17
195400 發(fā)表于 2021-6-5 16:50
菜單隱藏起來也有不方便的毛病： 一是不能直觀的知道正在播放的視頻的title， 二是如果不做說明就不知道菜 ...

為您點贊！這樣很好，正在播放的視頻的title，把鼠標放到視頻的左上角就可知道，這是網上很多播放器都這樣，可以說是“共識”吧！至于不知道有無菜單，同樣是“共識”，鼠標在視頻上移動有無顯示就知道。若有一按鈕，點擊時開關菜單就更完美了。再一個就是當視頻的title數超個“盒子”的高度時看不到title了（見我空間的CCTV12……），能否做成上下拉動的菜單條？
作者: 195400    時間: 2021-6-5 22:07
華妹 發(fā)表于 2021-6-5 21:17
為您點贊！這樣很好，正在播放的視頻的title，把鼠標放到視頻的左上角就可知道，這是網上很多播放器都這 ...
若有一按鈕，點擊時開關菜單就更完美了


我認為按鈕方案不可取，理由是按鈕放在畫面上一樣是遮擋畫面，而放在畫面外則整體性就破壞了。

現在菜單項可以拉動選擇，偷了點懶把相同的歌曲復制了一遍只是為了示意拖動菜單是可能的。
作者: 寒冬殘荷    時間: 2021-6-5 23:14
195400 發(fā)表于 2021-6-5 22:07
我認為按鈕方案不可取，理由是按鈕放在畫面上一樣是遮擋畫面，而放在畫面外則整體性就破壞了。

現 ...

為你點贊！太完美了！現在只要鼠標放到視頻內菜單就出現，離開視頻就隱藏。在我人個人空間試了，我的46個視頻標題都看到了。
作者: 195400    時間: 2021-6-6 06:42
華妹 發(fā)表于 2021-6-5 23:14
為你點贊！太完美了！現在只要鼠標放到視頻內菜單就出現，離開視頻就隱藏。 ...

只需添加視頻地址和名稱多少個無差別
作者: 紅楓    時間: 2021-6-6 13:12
195400 發(fā)表于 2021-6-5 16:50
菜單隱藏起來也有不方便的毛病： 一是不能直觀的知道正在播放的視頻的title， 二是如果不做說明就不知道菜 ...

我感覺你這樣的處理比用按鈕效果更好。贊一個！
作者: 195400    時間: 2021-6-6 14:23
紅楓 發(fā)表于 2021-6-6 13:12
我感覺你這樣的處理比用按鈕效果更好。贊一個！

謝謝您的建議
作者: 寒冬殘荷    時間: 2021-6-8 22:13
195400 發(fā)表于 2021-6-5 22:07
我認為按鈕方案不可取，理由是按鈕放在畫面上一樣是遮擋畫面，而放在畫面外則整體性就破壞了。

現 ...

在手機上看顯示不了菜單。
作者: 195400    時間: 2021-6-9 05:26
作者: 195400    時間: 2021-6-9 05:37
華妹 發(fā)表于 2021-6-8 22:13
在手機上看顯示不了菜單。

1.從沒在手機上做過編寫代碼；
2.33樓添加了手機的觸摸事件處理，觸摸屏幕就可以打開菜單，但很不容易選擇；
3.23樓沒有觸摸事件處理也可以打開菜單（IOS safari瀏覽器），手機品牌很多，瀏覽器種類也不少但沒條件測試。
4. 手機屏幕太小，看起來很吃力，手機橫著看也還勉強，實際效果23樓似乎還好點。
5.33樓打開菜單用一根手指觸摸畫面，關閉用兩根手指觸摸畫面。6.23樓打開菜單用一根手指點擊畫面，關閉在畫面外點擊。






歡迎光臨 中畫網 (http://www.nujv.cn/) Powered by Discuz! X3.4
主站蜘蛛池模板： 久久婷婷五月综合97色一本一本| 国产亚洲综合色就色| 浪潮AV色综合久久天堂| 狠狠色丁香婷综合久久| 亚洲国产精品成人AV无码久久综合影院 | 色综合欧美在线视频区| 亚洲欧洲国产成人综合在线观看 | 国产精品国色综合久久| 色欲香天天天综合网站| 久久久久高潮综合影院| 色综合色综合色综合色欲| 综合激情五月综合激情五月激情1| 色欲色香天天天综合网站免费| 插插插色欲综合网| 天天干天天色综合| 93精91精品国产综合久久香蕉| 三级韩国一区久久二区综合| 伊人色综合一区二区三区| 激情五月综合网| 天天综合网天天综合色| 亚洲va欧美va国产综合| 亚洲综合在线观看视频| 久久综合亚洲色HEZYO社区| 久久综合色老色| 亚洲另类激情综合偷自拍图| 亚洲精品综合在线影院| 亚洲日本欧美产综合在线| 国产成人精品综合久久久| 成人伊人亚洲人综合网站222| 亚洲狠狠婷婷综合久久久久| 久久综合给合久久狠狠狠97色69| 狠狠色综合久色aⅴ网站| 亚洲另类激情综合偷自拍图| 激情五月综合网| 国产日韩欧美综合| 国产亚洲精品精品国产亚洲综合| 欧美αv日韩αv另类综合 | av色综合久久天堂av色综合在| 欧美婷婷六月丁香综合色| 狠狠色丁香婷婷综合精品视频 | 久久婷婷五月综合成人D啪|