ckplayer

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 943|回复: 1

html5按顺序播放mp4

[复制链接]

4

主题

70

帖子

662

积分

高级会员

Rank: 4

积分
662
发表于 2024-3-7 18:27:28 | 显示全部楼层 |阅读模式
没错,我文抄公又来了,这回抄一个按顺序的列表:

demo:
1.index.html
---------------
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8" />
  5.                 <link rel="stylesheet" href="css/style.css" />
  6.                 <script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
  7.                 <script type="text/javascript" src="js/main.js" ></script>
  8.                 <title></title>
  9.         </head>
  10.         <body>
  11.                 <div id="cans">
  12.                         <video controls="controls" id="video" src="" poster="" height="720px" width="1300px">
  13.                                
  14.                         </video>
  15.                         <aside id="playList">
  16.                                 <header>
  17.                                         <h4>播放列表</h4>
  18.                                 </header>
  19.                                 <ul>
  20.                                         <li value="/mp4/很爱很爱你.mp4" title="很爱很爱你">很爱很爱你</li>
  21.                                         <li value="/mp4/因为爱情.mp4" title="因为爱情">因为爱情</li>
  22.                                         <li value="/mp4/无法言喻.mp4" title="无法言喻">无法言喻</li>
  23.                                         <li value="/mp4/爱的供养.mp4" title="爱的供养">爱的供养</li>
  24.                                         <li value="/mp4/我心永恒.mp4" title="我心永恒">我心永恒</li>
  25.                                         <li value="/mp4/爱如空气.mp4" title="爱如空气">爱如空气</li>
  26.                                 </ul>
  27.                                 <!--<button title="展开播放列表" id="playList-show"> > </button>-->
  28.                                 <button title="收起播放列表" id="playList-hidden"> < </button>
  29.                         </aside>
  30.                         <button title="展开播放列表" id="playList-show1"> > </button>
  31.                        
  32.                 </div>
  33.         </body>
  34. </html>
复制代码
2.main.js
  1. window.onload = function(){
  2.        
  3.         var video = document.getElementById("video");
  4.         var lis = document.getElementsByTagName("li");
  5.         var vLen = lis.length; // 播放列表的长度
  6.         var url = [];
  7.         var ctrl = document.getElementById("playList-hidden");
  8.         var ctrl_show = document.getElementById('playList-show1');
  9.         var aside = document.getElementById("playList");
  10.         var curr = 1; // 当前播放的视频
  11.        
  12.         for(var i=0;i<lis.length;i++){
  13.                
  14.                         url[i] = lis[i].getAttribute("value");
  15.                        
  16.         }
  17.        
  18.         //绑定单击事件
  19.         for(var i=0;i<lis.length;i++){
  20.                
  21.                         lis[i].onclick = function(){
  22.                                 for(var j=0;j<lis.length;j++){
  23.                                         if(lis[j] == this){
  24.                                                 video.setAttribute("src",this.getAttribute("value"));
  25.                                                 video.setAttribute('autoplay','autoplay');
  26.                                                 this.innerHTML = '> '+this.innerHTML;
  27.                                                 this.className = "select";
  28.                                                 curr = j+1;
  29.                                         }else{
  30.                                                 lis[j].innerHTML = lis[j].getAttribute("title");
  31.                                                 lis[j].className = "";
  32.                                         }
  33.                                 }
  34.                                
  35.                        
  36.                 }
  37.                        
  38.         }       
  39.        
  40.         //收起播放列表
  41.         ctrl.onclick = function(){
  42.                
  43.                 aside.style.transition = "1s";
  44.                 aside.style.transform = "translateX(-10vw)";
  45.                 setTimeout(function(){
  46.                         aside.style.display = "none";
  47.                         ctrl_show.style.visibility= 'visible';
  48.                 },"1000");
  49.        
  50.         }
  51.        
  52.         //展开播放列表
  53.         ctrl_show.onclick = function(){
  54.                 aside.style.display = "block";
  55.                 ctrl_show.style.visibility= 'hidden';
  56.                 setTimeout(function(){
  57.                         aside.style.transform = "translateX(0vw)";
  58.                 },"0");
  59.        
  60.         }

  61.         video.setAttribute('src',url[0]);
  62.         lis[0].innerHTML = '> '+lis[0].innerHTML;
  63.         lis[0].className = "select";
  64.        
  65.        
  66.        
  67.         video.addEventListener('ended', play);
  68.         //play();
  69.         function play() {
  70.            video.src = url[curr];
  71.            video.load(); // 如果短的话,可以加载完成之后再播放,监听 canplaythrough 事件即可
  72.            video.play();
  73.           
  74.            for(var j=0;j<lis.length;j++){
  75.                         if(j == curr){
  76.                                 video.setAttribute("src",lis[j].getAttribute("value"));
  77.                                 video.setAttribute('autoplay','autoplay');
  78.                                 lis[j].innerHTML = '> '+lis[j].innerHTML;
  79.                                 lis[j].className = "select";
  80.                         }else{
  81.                                 lis[j].innerHTML = lis[j].getAttribute("title");
  82.                                 lis[j].className = "";
  83.                         }
  84.                 }
  85.            curr++;
  86.            if (curr >= vLen) curr = 0; // 播放完了,重新播放
  87.         }
  88.        
  89. }
复制代码
3.style.css
  1. *{
  2.         margin: 0 ;
  3.         border: none;
  4.         padding: 0;
  5. }
  6. body{
  7.         background: lightcoral;
  8. }
  9. #cans{
  10.         position: relative;
  11.         margin: 0 auto;
  12.         margin-top: 5vh;
  13.         height: 720px;
  14.         width: 80vw;
  15. }
  16. #video{
  17.         /*height: 80vh;*/
  18.         float: left;
  19.         background: black;
  20.         position: relative;   /*去掉这句将会使得video优先级失效*/
  21.         z-index: 99;
  22. }

  23. aside{
  24.         float: left;
  25.         height: 720px;
  26.         width: 10vw;
  27.         background: black;
  28.         opacity: 0.9;
  29.         position: relative;
  30. }
  31. aside header h4{
  32.         color: white;
  33.         margin-bottom: 20px;
  34.         margin-top: 5px;
  35.         text-align: center;
  36. }
  37. aside ul{
  38.         background: black;
  39.         width: 10vw;
  40.         list-style: none;
  41.         text-align: center;
  42. }
  43. aside ul li{
  44.         color: white;
  45.         font-size: 14px;
  46.         line-height:30px ;
  47. }

  48. aside ul li:hover{
  49.        
  50.         background-color: lightgray;
  51.         color: lightcoral;
  52.         font-weight: bold;
  53. }

  54. aside #playList-hidden {
  55.         position: absolute;
  56.         bottom: 250px;
  57.         right: 0;
  58.         width:20px ;
  59.         height: 32px;
  60.         background: lightgoldenrodyellow;
  61.         font-size: 16px;
  62.         font-weight: bold;
  63.         border-top-left-radius:10px ;
  64.         border-bottom-left-radius:10px ;
  65.         opacity: 0.5;
  66.         z-index: 10000;
  67. }

  68. #cans #playList-show1{
  69.         margin-top: 230px;
  70.         width:20px ;
  71.         height: 32px;
  72.         background:lightgoldenrodyellow;
  73.         font-size: 16px;
  74.         font-weight: bold;
  75.         border-top-right-radius:10px ;
  76.         border-bottom-right-radius:10px ;
  77.         opacity: 1;
  78.         visibility: hidden;
  79. }

  80. #cans #playList-show1:hover,aside #playList-hidden:hover{
  81.         opacity: 0.7;
  82. }
  83. .select{
  84.         color: lightcoral;
  85. }
复制代码
4.效果图示

5.视频自备,jquery-1.7.2.min.js自行下载或直接引用官方的。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

4

主题

70

帖子

662

积分

高级会员

Rank: 4

积分
662
 楼主| 发表于 2024-3-25 01:52:04 | 显示全部楼层
为什么html5已经有video标签还要开发视频插件?
因为video标签不作处理的话,播放mp4会发生音画不同步的现象,画面滞后声音,有时根本没法看。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表