触发基于滚动位置的视频自动播放(Triggering a video autoplay based

我写的是使用来自scrollorama.js脚本擦拭动画的脚本。 我希望能够在滚动深度某些标记物来实现自动播放的视频：即，当视频页面已经消灭了另一个，现在已经是完全可见。 我已经想通了如何衡量滚动深度，我成功登录在我的控制台。 我已经想通了如何衡量有多深我已滚动，但也许我太累了，我不知道如何提出视频的滚动深度自动播放。 我希望这是一个法律问题，而且我可以得到一些帮助。 有没有人在那里品尝过？ 下面是代码迄今。

enter code here $（文件）。就绪（函数（）{

$（窗口）.scroll（函数（E）{

  var scrollAmount = $('body').scrollTop();
  console.log(scrollAmount);

}）;

    var controller = $.superscrollorama();
    var pinDur = 800;   
    // create animation timeline for pinned element
var pinAnimations = new TimelineLite();

//pinAnimations.append([TweenMax.to($('#green'), .5, {css:{top:0}})], .5)
pinAnimations.append([TweenMax.to($('#intromovie'), .5, {css:{top:0}})], .5 )
pinAnimations.append([TweenMax.to($('#red'), .5, {css:{top:0}})], .5) 
pinAnimations.append([TweenMax.to($('#blue'), .5, {css:{top:0}})], .5 )
pinAnimations.append([TweenMax.to($('#movie1'), .5, {css:{top:0}})], .5);
pinAnimations.append([TweenMax.to($('#history1'), .5, {css:{top:0}})], .5);
//pinAnimations.append(TweenMax.to($('#pin-frame-unpin'), .5, {css:{top:'100px'}}));


controller.pin($('#content_wrapper'), pinDur, {
    anim:pinAnimations, 
    onPin: function() {
        $('#content_wrapper').css('height','100%');
    }, 
    onUnpin: function() {
        $('#content_wrapper').css('height','1000px');
    }


});

});

Answer 1:

我想通了这一点，所以我回答我的问题有很多修补了这里其他的答案的帮助！

如果有人有兴趣，在html很简单：

    <div id="videoHolder"></div>

jQuery的也很简单：

        $(function(){

    $(window).scroll(function(e) {

        var scrollAmount = $('body').scrollTop();   
        console.log(scrollAmount);


    if(scrollAmount >="theamountyouwant" && scrollAmount <= "theotheramountyouwant") {


        $("#videoHolder").html(
            '<video width="1200" height="700" autoplay>' +

         '<source src="http://itp.nyu.edu/~rnr217/HTML5/Week3/video/testopen.webm" type="video/webm"></source>'  +
        '<source src="http://itp.nyu.edu/~rnr217/HTML5/Week3/video/testopen.mp4" type="video/mp4"></source>' +

         '</video>');

Answer 2:

刚刚从下面添加脚本和一个页面上添加playonscroll参数去你的视频标签的任何地方。

还有一些时候，它需要使用不同的滚动容器不是身体，有时它并不明显，所以下面的代码工作对我来说就像魅力：

setInterval(function () {
    $('video[playonscroll]').each(function () {
        var videoElement = $(this)[0]; 
        var eTop = $(this).offset().top;
        var elementOffestY = (eTop - $(window).scrollTop());
        var videoOffset = [elementOffestY, elementOffestY+$(this).height()];
        if ((videoOffset[0] < 100) && (videoOffset[1] > 350)) {
            console.log('play');
            if (!videoElement.playing) {
                videoElement.play();
            }
        } else {
            if (videoElement.playing) {
                videoElement.pause();
            }
        }
    });
},300);

在情况下，如果你总是使用体容器滚动只是改变的setInterval为$（窗口）.scroll

而且不要忘记为视频标签元素定义属性：

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
    get: function(){
        return (this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
    }
})

文章来源: Triggering a video autoplay based on scroll position