HTML5 通过Vedio标签实现视频循环播放

单个视频  直接在index.html中编写代码就行了:



<video id="myVedio" autoplay="autoplay" controls="controls" width="800px">
	<source src="video/1.webm"></source>
</video>

有封面的用下面这个代码:

<video id="video" src="" controls="controls" autoplay="autoplay" class="box_left__video" poster="img/ban1.jpg"></video>
<ul style="display: none">
    <li value="img/movie.ogg" class="video_list"></li>
    <li value="img/video.mp4" class="video_list"></li>
    <li value="img/video2.mp4" class="video_list"></li>
    <li value="img/video3.mp4" class="video_list"></li>
    <li value="img/video4.mp4" class="video_list"></li>
</ul>

有多个视频,一个播放完以后另一个播放,知道最后,再从头循环播放。

代码如下:

<video id="video1" class="indexBanner" autoplay>
            <!-- <source src="vedio/first.mp4" type="video/mp4" />
        <source src="vedio/second.mp4" type="video/mp4" /> --> <!-- <source src="vedio/second.ogg" type="video/ogg" /> -->
            Your browser does not support HTML5 video. </video>
            <script type="text/javascript">
                debugger;
                var vList = [ 'vedio/first.mp4', 'vedio/second.mp4' ]; // 初始化播放列表 var
                vLen = vList.length; // 播放列表的长度
                var curr = 0; // 当前播放的视频 
                var video = document.getElementById("video1");
                video.addEventListener('ended', play);
                play();
                function play() {
                    var video = document.getElementById("video1");
                    video.src = vList[curr];
                    video.load(); //如果短的话,可以加载完成之后再播放,监听 canplaythrough 事件即可
                    video.play();
                    curr++;
                    if (curr >= vLen)
                        curr = 0; // 播放完了,重新播放
                }
            </script>
jquery代码
$(function () {
        var vLen = $('.video_list').length; // 播放列表的长度
        var curr = 0; // 当前播放的视频
        $('#video').on('ended', videoPlay);//侦听事件,视频播放完后调用videoPlay()方法
        videoPlay();
        function videoPlay() {
            for(var i=0;i<vLen;i++){
                var list = $('.video_list').eq(i);
                if(i === curr){
                    $('#video').attr("src",list.attr('value')); //切换视频链接
                    list.html('正在播放');   //提示正在播放的视频
                }else{
                    list.html('');
                }
            }
            curr++;
            if (curr >= vLen) curr = 0; // 列表播放完,重新播放
        }
});

2020-12-30 10:45:37 通过 手机 浏览(144)

共有0条评论!

发表评论