html video audio 连续播放视频音频

2020-12-24 10:23:26

关于html5 video的连续播放

<!doctype html><html lang="en">
    <head>
    <meta charset="utf-8">
    <title>关于html5 video的连续播放</title>
   </head> 

<body> <video id="video" autoplay="" controls="controls">您的浏览器不支持HTNL5的video标签</video> 
</body>
 </html> 
<script> 
var video_list=['videos/demo.mp4','videos/demo2.mp4'];//初始化播放列表
 video_length=video_list.length;//播放列表的长度 var curr=0;//当前播放的视频
 var video=document.getElementById('video');
 video.addEventListener('ended',play); play();
 function play(){ video.src=video_list[curr];
 video.load();//若视频很短,加载完后再播放,监听canplaythrough事件即可  
video.play(); 
curr++; 
if(curr>=video_length){
 curr=0;//播放完后,重新播放
    }    }</script>
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>连续播放</title>
    <style>
        video{
            margin: 0 auto;
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
        <video  id="myvideo" width="100%" height="auto" controls="controls" >
            你的浏览器不支持HTML5播放此视频 
            <source src="videos/demo.mp4" type='video/mp4' />
        </video>
</body>
</html>
<script src="http://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script>
<script language="javascript">
    $(document).ready(function(){
        video.play();
    });
    var vList = ['videos/demo2.mp4', 'videos/demo3.mp4','videos/demo.mp4']; // 初始化播放列表
    var vLen = vList.length;
    var curr = 0;
    var video = document.getElementById("myvideo");
    video.addEventListener('ended', function(){
        alert("已播放完成,继续下一个视频")
        play();
    });
    function play() {
        video.src = vList[curr];
        video.load();
        video.play();
        curr++;
        if(curr >= vLen){
            curr = 0; //重新循环播放
        }

    }
</script>


  • 2020-05-13 09:37:50

    transform-origin(变形原点) 怎么用

    transform-origin是变形原点,也就是该元素围绕着那个点变形或旋转,该属性只有在设置了transform属性的时候起作用

  • 2020-05-13 09:56:35

    Could not find method google() for arguments [] on repository container.

    1、打开项目根目录下android/gradle/wrapper/gradle-wrapper.properties 将distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip中的2.14.1改成4.1 ———————————————— 版权声明:本文为CSDN博主「peachesTao」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/taoerchun/article/details/93870941

  • 2020-05-13 10:05:23

    inline svg想写介绍以及使用

    inline svg是目前前端图标解决方案的最优解(当然不仅限于图标),而且使用方式也及其简单,只要将svg图标代码当成普通的html元素来使用即可