我需要一个与滚动同步的视频。请参阅以下链接,其中iMac pro(这是一个mp4文件)与滚动同步。
https://www.apple.com/in/imac-pro/
编辑:这可以在Mac上的Safari上看到。
答案 0 :(得分:1)
例如,您可以使用skrollr库获取滚动值,并使用video.currentTime属性为视频设置动画。
以下示例摘自here。
skrollr.init({
smoothScrolling: false,
forceHeight : false
});
// Seek video
// Cross browser animation
// https://gist.github.com/Warry/4254579#beware-of-reflows
var animFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
// IE Fallback, you can even fallback to onscroll
function (callback) { window.setTimeout(callback, 1000 / 60) };
function seek()
{
$('video[data-time]').each(function ()
{
var $video = $(this),
ratio = parseFloat($video.attr('data-time')).toFixed(2), // Uses Skrollr to get scroll ratio
duration = $video[ 0 ].duration; // Total video time
// Seek through video (if video seems loaded)
if (duration) $video[ 0 ].currentTime = duration * ratio;
});
// Repeat
animFrame(seek);
}
$('video[data-time]').on('loadedmetadata', function (e)
{
// Launch first animation
animFrame(seek);
});
body {
height: 3000px;
position: relative;
background-color: #eee;
}
video {
position: fixed;
top: 50%;
left: 50%;
z-index: 1;
transform: translate(-50%,-50%);
max-width: 90%;
max-height: 80%;
}
h1 {
text-align: center;
position: absolute;
left: 0;
right: 0;
z-index: 2;
}
.ending {
position: absolute;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>
<h1 class="begin">Please scroll...</h1>
<video preload data-start="@data-time: 0" data-end="@data-time: 1">
<source type="video/webm; codecs="vp8, vorbis"" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm">
<source type="video/ogg; codecs="theora, vorbis"" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv">
<source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4">
</video>
<h1 class="ending">The end.</h1>
答案 1 :(得分:0)
我认为有10张图片,当滚动按下图像开关时 -
您可以尝试使用以下内容: https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html
答案 2 :(得分:0)
上面的sasensis答案的问题在于,它在手机上的表现非常差,看起来一点也不流畅。一个简单的调整即可检查视频的就绪状态,可以提高性能,但仍然不是很顺利。这是我的笔。 https://codepen.io/marcchehab/pen/MWKZbNO
相关的补充是:
if (myVideo.readyState >= 3) {
myVideo.currentTime = scrollVideo.a;
}