我正在尝试重新创建 robinhood.com 的标题视频。它会暂时播放一个视频，然后循环播放另一个视频。这是我尝试让它工作的方法:
<video autoplay="1" class="header-video" id="first_video" preload="1">
<source src="Video1.mp4" type="video/mp4"/>
</video>
<video class="header-video hidden" id="video_loop" loop="1" preload="1">
<source src="Video2.mp4" type="video/mp4"/>
</video>
我认为这会起作用，但它播放第一个视频然后卡住，而不播放应该循环的第二个视频。我们将不胜感激所有帮助，谢谢。
最佳答案
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<title>websunumu</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
body {
font-family: arial, sans-serif;
background-color: red;
}
#output {
width: 200px;
height: 320px;
}
#buffer {
display: none;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#close").click(function(){
$(".sunum").hide();
});
});
</script>
<h1>transparan video</h1>
<div class="sunum">
<video id="video" loop="1" preload="1" autoplay style="display:none">
<source src="compressed.mp4" type='video/mp4; codecs="avc1.42E01E"' />
</video>
<canvas width="200" height="640" id="buffer"></canvas>
<canvas width="200" height="320" id="output"></canvas>
<p>
<a href="#" id="pause"><img src="pause.png" width="32" height="32" alt=""/></a>
<a href="#" id="start"><img src="play.png" width="32" height="32" alt=""/></a>
<a href="#" id="close"><img src="close.png" width="32" height="32" alt=""/></a></p>
</div>
</div>
<script>
(function(){
var outputCanvas = document.getElementById('output'),
output = outputCanvas.getContext('2d'),
bufferCanvas = document.getElementById('buffer'),
buffer = bufferCanvas.getContext('2d'),
video = document.getElementById('video'),
width = outputCanvas.width,
height = outputCanvas.height,
interval;
function processFrame() {
buffer.drawImage(video, 0, 0);
// this can be done without alphaData, except in Firefox which doesn't like it when image is bigger than the canvas
var image = buffer.getImageData(0, 0, width, height),
imageData = image.data,
alphaData = buffer.getImageData(0, height, width, height).data;
for (var i = 3, len = imageData.length; i < len; i = i+4) {
imageData[i] = alphaData[i-1];
}
output.putImageData(image, 0, 0, 0, 0, width, height);
}
video.addEventListener('play', function() {
clearInterval(interval);
interval = setInterval(processFrame, 40)
}, false);
// Firefox doesn't support looping video, so we emulate it this way
video.addEventListener('ended', function() {
video.play();
}, false);
document.getElementById('start').addEventListener('click', function(event) {
video.play();
event.preventDefault();
}, false);
document.getElementById('close').addEventListener('click', function(event) {
video.remove();
event.preventDefault();
}, false);
document.getElementById('pause').addEventListener('click', function(event) {
video.pause();
clearInterval(interval);
event.preventDefault();
}, false);
})();
</script>
</body>
</html>关于javascript - HTML 自动播放一个视频然后循环播放另一个视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24539399/