滚动上的视频html5

我想在两个div之间夹着的滚动上运行视频。这是我受到启发的实际代码笔。滚动上的视频html5

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=&quot;vp8, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source> 
    <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source> 
    <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source> 
    <p>Sorry, your browser does not support the &lt;video&gt; 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>

但问题发生时，它夹在2格

http://codepen.io/daneuchar/pen/BNEWJZ

<div id="some1"></div> 
<video id="v0"></video> 
<div id="some2"></div>

我要找的作用是，当滚动位置的视频

即视频开始。 （$（ '＃沃'）。现在的位置是（）。顶部）

和结束滚动位置（开始现在的位置+视频元素高）

来源

2015-08-13 Daniel Euchar

您需要使用的视频高度和偏移移动视频时要计算的页面顶部。请注意，在onscroll处理它得到

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

来源

2015-08-13 04:41:35 DGS

呀之间的值不幸的是用这种方法你就失去了精确的全屏解决方案必须在它被滚动的13500个像素，而在这个解决方案，您只滚动视频的高度 – DGS

是的，它也与浏览器有关，一些浏览器将滚动每个滚动多个像素，只触发一个滚动事件，其他浏览器将触发滚动的每个像素的滚动事件。为了得到一个您想要的方式工作的解决方案，您将不得不检测与上次滚动的区别，然后将视频设置为在这些位置之间播放 – DGS

滚动上的视频html5

回答

相关问题