보기로 스크롤했을 때 비디오 파일을 재생하는 방법

그래서 뷰포트로 스크롤하여 다른 ID를 호출했지만 작동하지 않는 비디오를 활성화하려하고 있습니다.이 새로운 (js/jquery)에 익숙하지 않습니다. 어떤 일이 일어나고 있는지에 대해서는 100 %가 아니므로 도움이 될 것입니다.보기로 스크롤했을 때 비디오 파일을 재생하는 방법

각 비디오를보기로 스크롤 할 때마다 개별적으로 재생하려고 할 때, 첫 번째 비디오는 작동하지만 스크롤하면 다른 후속 비디오는 재생되지 않습니다.

나는이 임 http://jsfiddle.net/8TpN5/

업데이트를 수행하려는 것을보고 돕기 위해 만든 : 좋아, 그래서 이것이 내가이 http://jsfiddle.net/8TpN5/1/을 작업 할하지만 난 그것이 작동하고 코드를 반복하지하는 방법을 얻을 수있는 방법인가?

var videoId = document.getElementById("video","videoTwo"); 
var playVideo = videoId, 
fraction = 0.9; 

function checkScroll() { 
var x = playVideo.offsetLeft, 
    y = playVideo.offsetTop, 
    w = playVideo.offsetWidth, 
    h = playVideo.offsetHeight, 
    r = x + w, //right 
    b = y + h, //bottom 
    visibleX, 
    visibleY, 
    visible; 

if (window.pageXOffset >= r || window.pageYOffset >= b || window.pageXOffset + window.innerWidth < x || window.pageYOffset + window.innerHeight < y) { 
    return; 
} 

visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset)); 
visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset)); 

visible = visibleX * visibleY/(w * h); 

if (visible > fraction) { 
    playVideo.play(); 
} else { 
    playVideo.pause(); 
} 
} 

checkScroll(); 
window.addEventListener('scroll', checkScroll, false); 
window.addEventListener('resize', checkScroll, false);

출처

2014-04-01 user3097640

이 두 단지 첫 번째 요소받지 않습니다 : 'var에 인 videoId = document.getElementById를 ("비디오", "videoTwo");' 그래서 당신이하는 일은 실제로 첫 번째 요소 "비디오"만 가져 오는 것입니다. – Colandus

죄송합니다 귀하의 의견을보기 전에 쓰고있었습니다. – Diego

도움을 주셔서 감사합니다. 그러나 js의 모든 유사한 부분을 결합하는 방법은 어떻게 될까요? 그래서 다른 비디오를 추가 할 때마다 자신을 반복 할 필요가 없습니다. 나는 jsfiddle를 업데이트했고 이제는 원하는대로 작동하지만 가능한 경우 최적화하고 싶습니다. – user3097640

단지 getElementById를 getElementsByTagName으로 변경하십시오.

희망이 도움이 :

http://jsfiddle.net/jAsDJ/

var videos = document.getElementsByTagName("video"), 
fraction = 0.8; 
function checkScroll() { 

    for(var i = 0; i < videos.length; i++) { 

     var video = videos[i]; 

     var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right 
      b = y + h, //bottom 
      visibleX, visibleY, visible; 

      visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset)); 
      visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset)); 

      visible = visibleX * visibleY/(w * h); 

      if (visible > fraction) { 
       video.play(); 
      } else { 
       video.pause(); 
      } 

    } 

} 

window.addEventListener('scroll', checkScroll, false); 
window.addEventListener('resize', checkScroll, false);

출처

2014-04-03 08:18:55 RXMESH

정말 고마워, 나는 이것을 훨씬 복잡한 방식으로 해결하려고 노력했다. for 루프는 많은 의미가 있습니다. – user3097640

이 줄 :

var videoId = document.getElementById("video","videoTwo");

이되어야한다 :

var videoOne = document.getElementById("video"), 
    videoTwo = document.getElementById("videoTwo");

getElementById는 매개 변수로 하나 개의 ID를 받아 하나의 개체를 반환합니다.

출처

2014-04-01 22:32:38 Diego

보기로 스크롤했을 때 비디오 파일을 재생하는 방법

답변

관련 문제