Question

我正在尝试在滚动上运行一个夹在2 div之间的视频。这是我受到启发的实际代码笔。

HTML

onVungleCacheAvailable()

sdkbox::PluginVungle::isCacheAvailable()

但问题发生在夹在2 div之间时

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

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

我正在寻找的效果是视频应该在滚动位置处于视频时启动

即。 （$（＆＃39;＃vo＆＃39;）。postion（）。top）

并以滚动位置结束（开始位置+视频元素高度）

Answer 1

您需要使用页面顶部的视频高度和偏移量来计算移动视频的时间。请注意，在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

Answer 2

How can i do this for more than one video ?

// select video element
var vid = document.getElementById('v0');
var time = $('#time');
var scroll = $('#scroll');
var windowheight = $(window).height() - 20;

i want to made v0 to open end i mean if video contain more then video then ?

滚动html5上的视频

2 个答案: