代码之家  ›  专栏  ›  技术社区  ›  jeffreynolte

用JavaScript控制html5视频播放器循环

  •  5
  • jeffreynolte  · 技术社区  · 16 年前

    3 回复  |  直到 6 年前
        1
  •  18
  •   Christian C. Salvadó    16 年前

    你可以检测出 loop true

    对于不支持它的浏览器,您可以简单地绑定 ended 媒体活动,并重新开始:

    var myVideo = document.getElementById('videoId');
    if (typeof myVideo.loop == 'boolean') { // loop supported
      myVideo.loop = true;
    } else { // loop property not supported
      myVideo.addEventListener('ended', function () {
        this.currentTime = 0;
        this.play();
      }, false);
    }
    //...
    myVideo.play();
    
        2
  •  1
  •   Bipul Roy    8 年前

    你可以简单地循环播放视频 loop="false" 用于停止自动视频重复播放。

    <iframe style="position: absolute; top: 0; left: 0;"
    src="http://video/name.mp4" width="100%" height="100%" frameborder="0"  webkitallowfullscreen loop="true" controls="false" mozallowfullscreen allowfullscreen></iframe>
    

    这个 loop="true" 将启用视频播放器循环。

        3
  •  0
  •   dxpkumar    9 年前
    <div>Iteration: <span id="iteration"></span></div>
    
    <video id="video-background" autoplay="" muted="" controls>
            <source src="https://res.sdfdsf.mp4" type="video/mp4">
    </video>
    
    var iterations = 1;
    
        document.getElementById('iteration').innerText = iterations;
    
            var myVideo = document.getElementById('video-background');
        myVideo.addEventListener('ended', function () {    
                    alert('end');
            if (iterations < 2) {
                this.currentTime = 0;
                this.play();
                iterations ++;          
                document.getElementById('iteration').innerText = iterations;
            }   
    
        }, false);
    
    
       // Please note that loop attribute should not be there in video element in order for the 'ended' event to work in ie and firefox