Kích hoạt tự động phát video dựa trên vị trí cuộn

Question

Tôi đang viết tập lệnh sử dụng hoạt ảnh Xóa từ tập lệnh scrollorama.js. Tôi hy vọng có thể triển khai video để tự động phát tại các điểm đánh dấu nhất định ở độ sâu cuộn: tức là khi trang video đã xóa một video khác và giờ đây có thể xem được hoàn toàn. Tôi đã tìm ra cách để đo độ sâu cuộn, tôi thành công đăng nhập nó trong giao diện điều khiển của tôi. Tôi đã tìm ra cách để đo độ sâu mà tôi đã cuộn, nhưng có lẽ tôi rất mệt mỏi, tôi không biết cách yêu cầu video phát tự động ở độ sâu cuộn. Tôi hy vọng đây là một câu hỏi pháp lý và tôi có thể nhận được một số trợ giúp. Có ai ngoài kia thử điều này trước đây không? Đây là mã cho đến nay.

enter code here $ (document) .ready (function() {

$ (window) .scroll (function (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

tôi figured this out, vì vậy tôi trả lời câu hỏi của riêng tôi với sự giúp đỡ của rất nhiều câu trả lời khác vá với nhau ở đây!

Nếu có ai quan tâm, html rất đơn giản:

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

Jquery cũng rất đơn giản:

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

chỉ cần thêm đoạn mã từ bên dưới và thêm playonscroll param vào thẻ video của bạn bất cứ nơi nào trên một trang.

Cũng một số lần nó cần thiết để sử dụng thùng chứa cuộn khác so với cơ thể, đôi khi nó không rõ ràng, vì vậy đoạn mã sau hoạt động giống như một nét duyên dáng cho tôi:

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

trong trường hợp nếu bạn luôn sử dụng thùng chứa cơ thể di chuyển chỉ cần thay đổi setInterval để $ (window) .scroll

Và đừng quên để xác định tài sản cho thẻ video phần tử:

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