Question

我正在尝试重新制作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>

我认为这会起作用，但它会播放第一个视频然后冻结，而不是播放应该循环播放的第二个视频。非常感谢所有帮助，谢谢。

Answer 1

<!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>

Answer 2

为什么不检查他们的代码并以同样的方式解决它？在这里查看setupVideos()功能：https://brokerage-static.s3.amazonaws.com/assets/CACHE/js/23d3f56c2529.js

HTML：

<video autoplay="1" class="header-video" id="first_video" preload="1">
  <source src="https://brokerage-static.s3.amazonaws.com/assets/marketing/video/RobinhoodHomepageVideoFirst.mp4">
  <source src="https://brokerage-static.s3.amazonaws.com/assets/marketing/video/RobinhoodHomepageVideoFirst.webmhd.webm">
  <source src="https://brokerage-static.s3.amazonaws.com/assets/marketing/video/RobinhoodHomepageVideoFirst.ogv">
</video>
<video class="header-video hidden" id="video_loop" loop="1" preload="1">
  <source src="https://brokerage-static.s3.amazonaws.com/assets/marketing/video/RobinhoodHomepageVideoLoop.mp4">
  <source src="https://brokerage-static.s3.amazonaws.com/assets/marketing/video/RobinhoodHomepageVideoLoop.webmhd.webm">
  <source src="https://brokerage-static.s3.amazonaws.com/assets/marketing/video/RobinhoodHomepageVideoLoop.ogv">
</video>

使用Javascript：

$('#first_video').bind('ended', function() {
    $('#first_video').remove();
    $('#video_loop')[0].play();
    $('#video_loop').removeClass('hidden');
});

HTML自动播放一个视频然后循环另一个视频

2 个答案: