javascript - H5的video标签的问题

问题描述

问 题

今天领导要求实现一个h5页面里面的播放器，可以在播放完一个视频后继续自动的播放第二个、第三个视频，请问大神们是否有这个经验，我一下没想出来有什么好的解决方式。

<video id="yhss_video">
                    <!--<source src="movie.ogg" type="video/ogg">-->
                    <source src="video/xxxxx.mp4" type="video/mp4"></source>
                    <!--<source src="movie.webm" type="video/webm">
                  <object data="movie.mp4" width="320" height="240">
                    <embed width="100%" height="100%" src="movie.swf">
                  </object>-->
                </video>

解决方案

代码如下:
<video id="myvideo" width="100%" height="auto" controls="controls" >

            你的浏览器不支持HTML5播放此视频 
    <span style="white-space:pre">    </span><!-- 支持播放的文件格式 --> 
    <source src="001.mp4" type='video/mp4' />  

</video>
JS代码：
<script language="javascript">

                    $(document).ready(function(){ 
                         video.play();   
                    }); 
                       
                    var vList = ['001.mp4', 'video//1.mp4', 'video//02.mp4']; // 初始化播放列表   
                    var vLen = vList.length;  
                    var curr = 0;  
                    var video = document.getElementById("myvideo");   
                    video.addEventListener('ended', function(){ 
                        play(); 
                    });   
                        
                    function play() {   
                        video.src = vList[curr];   
                        video.load();    
                        video.play();   
                        curr++;   
                        if(curr >= vLen){   
                            curr = 0; //重新循环播放 
                        }   
                         
                    }   

</script>

这篇关于javascript - H5的video标签的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！