jquery-waypoints - 滚动到视频时使用 JQuery Waypoints 播放视频

Question

当用户使用 jQuery 的航点插件滚动到 HTML5 视频时，我正在尝试播放它。

这是我的代码：

$(document).ready(function() { videoSetup(); });
function videoSetup() {

    var video = $("#video");

    video.waypoint(function(direction) {
        video.get(0).play();
    });   

}

当视频滚动到什么都没有发生时放。

Answer 1

HTML 标记看起来像：

<div class="video-test">
  <video id="video1" width="960">
    <source src="video-folder/video.mp4" type="video/mp4"> 
  </video>
</div>

video-test然后，您在容器航点加载视频的 javascript将是：

$(document).ready(function() { 
      var myVideo=document.getElementById("video1");

      $('.video-test').waypoint(function() {                
        myVideo.play(); 
        }, {
              offset: '50%',  // middle of the page
              triggerOnce: true // just my preference...
      });
});