HTML自动播放一个视频然后循环另一个
HTML Autoplay one video then loop another
我正在尝试重新创建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>
为什么不直接检查他们的代码并以相同的方式解决呢?看看这里的setupVideos()
函数:https://brokerage-static.s3.amazonaws.com/assets/CACHE/js/23d3f56c2529.js
<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没有'无法在Internet Explorer 11上工作
- 播放当前视频时如何停止其他视频?JavaScript
- Javascript运行php文件,然后下载文件
- 如何将屏幕分辨率乘以 80%,然后在代码中使用
- 如何使用vanillaJS将mp4视频插入到具有特定维度的html文档中,播放2秒,然后删除节点
- 如何在 owl-carousel 幻灯片中查找视频元素,然后仅为该特定幻灯片设置 owl-carousel 控件的 cs
- 等待背景视频完全加载,然后显示
- 构建HTML5视频内容,然后在iOS点击事件上播放视频
- jQuery检测视频退出全屏然后做一些事情
- Amazon s3存储视频,然后在我的网站上输出
- 播放视频,然后重定向到新页面
- 我如何用Node发送视频到客户端JavaScript blob,然后显示它
- 这可能吗?当鼠标悬停在你管视频然后播放视频,当鼠标悬停然后停止视频.它看起来像facebook
- HTML自动播放一个视频然后循环另一个
- 播放HTML5视频时,滚动到,然后播放,直到完成,只播放一次
- 我如何开始html5视频暂停,然后在用户开始视频然后自动播放
- 如何分割视频成秒,然后显示1秒,每次用户提交他们的电子邮件地址
- 视频,然后在html格式视频
- 在Phonegap中压缩视频文件,然后再上传