我希望创建一个完整的高度/宽度视口视频比较滑块,其灵感来自于本文:
我正在尝试让视频占据视口的整个高度和宽度,但到目前为止我还没有成功,我不确定如何实现这种效果。任何帮助将不胜感激,链接到JSFiddle示例和下面的代码:
HTML:
<div id="video-compare-container">
<video loop autoplay poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/dirty.jpg">
<source src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-dirty.mp4>
<source src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-dirty.webm>
</video>
<div id="video-clipper">
<video loop autoplay poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/clean.jpg">
<source src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-clean.mp4>
<source src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-clean.webm>
</video>
</div>
</div>
CSS
body {
background: #333;
margin:0;
}
#video-compare-container {
display: inline-block;
line-height: 0;
position: relative;
width: 100%;
padding-top: 42.3%;
}
#video-compare-container > video {
width: 100%;
position: absolute;
top: 0; height: 100%;
}
#video-clipper {
width: 50%; position: absolute;
top: 0; bottom: 0;
overflow: hidden;
}
#video-clipper video {
width: 200%;
postion: absolute;
height: 100%;
}
Javascript:
function trackLocation(e) {
var rect = videoContainer.getBoundingClientRect(),
position = ((e.pageX - rect.left) / videoContainer.offsetWidth)*100;
if (position <= 100) {
videoClipper.style.width = position+"%";
clippedVideo.style.width = ((100/position)*100)+"%";
clippedVideo.style.zIndex = 3;
}
}
var videoContainer = document.getElementById("video-compare-container"),
videoClipper = document.getElementById("video-clipper"),
clippedVideo = videoClipper.getElementsByTagName("video")[0];
videoContainer.addEventListener( "mousemove", trackLocation, false);
videoContainer.addEventListener("touchstart",trackLocation,false);
videoContainer.addEventListener("touchmove",trackLocation,false);
答案 0 :(得分:0)
我会在两个视频中使用canplaythrough
个事件,以检查它们是否准备就绪:
video1.addEventListener("canplaythrough", function() {
// video1 ready to be played
}, false);
当浏览器估计我有足够的数据可以继续播放流媒体时,会触发此事件。
只有这样我才能同时播放这两个视频:
video1.play()
video2.play()
PS。我认为您在同步素材时遇到了问题