根據滾動位置觸發視頻自動播放

我正在編寫使用scrollorama.js腳本中的Wipe動畫的腳本。我希望能夠實現視頻以自動播放滾動深度中的特定標記：即當視頻頁面已被另一個視頻頁面擦除時，現在可以完全觀看。我已經想出瞭如何測量滾動深度，我成功地將其記錄在我的控制檯中。我已經想出瞭如何衡量我滾動的深度，但也許我太累了，我不知道如何讓視頻在滾動深度自動播放。我希望這是一個法律問題，我可以得到一些幫助。有沒有人在那裏試過這個？這是迄今爲止的代碼。根據滾動位置觸發視頻自動播放

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'); 
    } 


}); 

});

來源

2013-03-24 nickyr

我想通了，所以我回答我自己的問題與許多其他答案一起修補在這裏的幫助！

如果有人有興趣，在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>');

來源

2013-04-07 14:00:16 nickyr

這是添加視頻到DOM時SCRO而不是自動播放已經在DOM上的視頻，我認爲這是一個更好的用例，因爲用戶實際上會看到視頻在當前位置，而不是突然出現視頻。 – 2017-06-10 16:44:43

剛剛從下面添加腳本和一個頁面上添加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); 
    } 
})

來源

2017-07-05 12:56:13

根據滾動位置觸發視頻自動播放

回答

相關問題