使用<video>标记在Chrome中按顺序播放两个视频

如何在HTML5视频标记中按顺序播放两个视频？使用<video>标记在Chrome中按顺序播放两个视频

在谷歌浏览器中，以下代码只播放第一个介绍视频。

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script> 

var i = 0; 
var sources = ['1.mp4', '2.mp4']; 
videoElement.addEventListener('ended', function(){ 
    videoElement.src = sources[(++i)%sources.length]; 
    videoElement.load(); 
    videoElement.play(); 
}, true); 

</script> 

</head> 
<body> 
<video id="videoElement" width="640" height="360" autoplay="autoplay"> 
    <source src="intro.mp4" type="video/mp4"></source> 
</video> 

<body> 
<html>

来源

2011-11-04 Frankie ' Moodurian' Kam

浏览器应该用JavaScript代码触发错误'videoElement未定义'，您必须从DOM获取视频元素，而不是直接使用其ID。请改变你的代码，以

$(document).ready(function() { 
    //place code inside jQuery ready event handler 
    //to ensure videoElement is available 
    var i = 0; 
    var sources = ['1.mp4', '2.mp4']; 
    $('#videoElement').bind('ended', function() { 
     //'this' is the DOM video element 
     this.src = sources[i++ % sources.length]; 
     this.load(); 
     this.play(); 
    }); 
});

来源

2011-11-08 16:25:59 ExpExc

谢谢，这非常有帮助，它的工作...除了最后两个视频现在无休止地播放。是什么造成的？如何在最后一个视频播放结束后停止播放？这让我疯狂。 –

我知道这个问题是旧的，你问这个年龄前，但它是由于该行上的模运算符来源[i ++％sources.length]。当我增加它确保它不会超过sources.length。当它发生时，它会循环回来。当i = 2时，2％2 = 0。这意味着它将不断重复索引0和索引1的来源。 – BrandonKowalski

感谢布兰登！ –

万一有人碰到这个问题又来了，这里是我的解决类似的问题，我需要在一个循环一次，然后播放第一视频第二个视频。我也支持.webm,.m4v和.mp4。

这是我的JS：

$(document).ready(function(){ 
     var vid = document.getElementById("landing-video"); 
     vid.onplay = function() { 
      var source=vid.currentSrc; 
      folder = source.match(/(.+)(\/)/); 
      ext = source.match(/(\.\w+)$/); 
     }; 

     vid.onended = function() { 
      $("#landing-video").attr({ 
      "src":folder[0]+"video-2"+ext[0], 
      "loop":"" 
      }); 
     }; 
    });

这是我的HTML：

<video autoplay="" muted="" poster="" id="landing-video"> 
     <source src="my-folder/video-1.webm" type="video/webm"> 
     <source src="my-folder/video-1.m4v" type="video/x-m4v"> 
     <source src="my-folder/video-1.mp4" type="video/mp4"> 
    </video>

这可能会节约一些时间。

来源

2016-04-18 19:40:29

使用<video>标记在Chrome中按顺序播放两个视频

回答

相关问题