Menu
I am trying to run a video on scroll which is sandwiched between 2 div. here is the actual code pen from which I was inspired.
http://codepen.io/anon/pen/GxDJg
HTML
<html >
<head>
<meta charset="UTF-8">
<title>Scrolling controls for HTML5 video</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="set-height"></div>
<video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload">
<source type="video/webm; codecs="vp8, vorbis"" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
<source type="video/ogg; codecs="theora, vorbis"" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source>
<source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source>
<p>Sorry, your browser does not support the <video> element.</p>
</video>
<div id="set-height2"></div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
But the problem happens when it's sandwiched between 2 div
http://codepen.io/daneuchar/pen/BNEWJZ
<div id="some1"></div>
<video id="v0"></video>
<div id="some2"></div>
The effect I'm looking for is the video should start when scroll position is at video
ie. ($('#vo').postion().top)
and end at scroll position (start postion + video element height)
569
You need to use the videos height and offset from the top of the page to calculate when you move the video. Notice in the onscroll handler it gets a value between
// select video element
var vid = document.getElementById('v0');
var time = $('#time');
var scroll = $('#scroll');
var windowheight = $(window).height() - 20;
var scrollpos = window.pageYOffset / 400;
var targetscrollpos = scrollpos;
var accel = 0;
// ---- Values you can tweak: ----
var accelamount = 0.01; //How fast the video will try to catch up with the target position. 1 = instantaneous, 0 = do nothing.
var bounceamount = 0.91; //value from 0 to 1 for how much backlash back and forth you want in the easing. 0 = no bounce whatsoever, 1 = lots and lots of bounce
// pause video on load
vid.pause();
window.onscroll = function() {
//Set the video position that we want to end up at:
targetscrollpos = ($(document).scrollTop() - $(vid).offset().top) / $(vid).height();
targetscrollpos = targetscrollpos > 0 ? targetscrollpos < $(vid).height() ? targetscrollpos : $(vid).height() : 0;
targetscrollpos *= 13500/ $(vid).height();
//move the red dot to a position across the side of the screen
//that indicates how far we've scrolled.
scroll.css('top', 10 + (targetscrollpos * windowheight));
};
setInterval(function() {
//Accelerate towards the target:
accel += (targetscrollpos - scrollpos) * accelamount;
//clamp the acceleration so that it doesnt go too fast
if (accel > 1) accel = 1;
if (accel < -1) accel = -1;
//move the video scroll position according to the acceleration and how much bouncing you selected:
scrollpos = (scrollpos + accel) * (bounceamount) + (targetscrollpos * (1 - bounceamount));
//move the blue dot to a position across the side of the screen
//that indicates where the current video scroll pos is.
time.css('top', 10 + (scrollpos / targetscrollpos * 400 * windowheight));
//update video playback
vid.currentTime = scrollpos;
vid.pause();
}, 40);
http://codepen.io/anon/pen/oXOZmx
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
