滚动HTML5视频

debugcn 发表于 Dev

丹尼尔·尤查（Daniel Euchar）

我正在尝试在2 div之间插入滚动视频。这是启发我的实际代码笔。

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

我要寻找的效果是视频应在滚动位置位于视频时开始播放

IE。（$（'＃vo'）。postion（）。top）

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

DGS

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。