zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    Spring Boot----处理异常
    Spring Boot----SpringBoot中SpringMVC配置原理
    git----常见问题
    源码分析----Mybatis
    spring----一些xml配置
    Spring MVC----spring MVC 异常处理
    java----小游戏
    java----垃圾回收机制
    java----常见jar包
    anconda安装
  • 原文地址:https://www.cnblogs.com/pxblog/p/12196280.html
Copyright © 2011-2022 走看看