video標簽實現多個視頻循環播放


 

<head>
 

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->

</head>

<body>
  
  <video  id="myvideo" width="100%" height="auto" controls="controls" muted> <!-- 加muted 是為了可以實現自動播放  -->
                你的瀏覽器不支持HTML5播放此視頻 
        <span style="white-space:pre">    </span><!-- 支持播放的文件格式 --> 
         <source src="" type='video/mp4' />  
 </video>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script>  
  <script>   
  
				var video = document.getElementById("myvideo");   
				var vList = ['/u/www/201610/101338015yhf.mp4', '/u/www/202001/1513372485r9.mp4']; // 初始化播放列表,這里的url要用相對路徑   
				var vLen = vList.length;  
                var curr = 0;
				$(document).ready(function(){ 
 
                         play();   
                       
                        video.addEventListener('ended', function(){ 
                            play(); 
                        });  
                          
                        });						
                            
                        function play() {   
                            video.src = vList[curr];   
                            video.load();    
                            video.play();   
                            curr++;   
                            if(curr >= vLen){   
                                curr = 0; //重新循環播放 
                            }   
                             
                        }   
</script> 
</body>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM