사용자가 동영상을 스크롤 할 때 html5로 내 동영상을 재생하려면 어떻게해야합니까?

나는 웹 페이지를 만드는거야 내가 거기 MP4 비디오가 : 나는 또한 JS 코드의 일부 썼다 사용자가 동영상을 스크롤 할 때 html5로 내 동영상을 재생하려면 어떻게해야합니까?

<video class="video--app" id="myVideo" autoplay="" muted="" preload="auto"> 
    <source src="./img/video.mp4" type="video/mp4"> 
</video>

setTimeout(function(){ 
      document.getElementById("myVideo").play(); 
     }, 1500);

을하고는 거의 확인 작업, 비디오가 다시 경기를 시작을 1.5 초. 그러나 기본적으로 화면에 나타나면 기본적으로 사용자가 스크롤 할 때 비디오를 변경하고 재생하려고합니다. 어떻게 JS 코드를 수정해야합니까? 감사합니다.

출처

2016-06-18 user3766930

This answer는 요소가보기에 있는지 여부를 확인하는 기능을 가지고있다 보기에 있다면, 그것을 시작하십시오 :

var videoEl = document.getElementById("myVideo"); 
var videoWasStarted = false; 

window.addEventListener('scroll', function(e) { 
    if (isScrolledIntoView(videoEl) && !videoWasStarted) { 
    videoWasStarted = true; 
    videoEl.play(); 
    } 
});

출처

2016-06-18 23:15:38 Schlaus

고마워, 거의 나를 위해 일했다! 여기에 한 가지 질문이 있습니다. 동영상을 한 번만 재생 한 다음 전혀 재생하지 않는 방법이 있습니까? – user3766930

@ user3766930 내 대답 편집 – Schlaus

-1

jQuery를 추가하면 더 쉽게 사용할 수 있습니다. 나의 제안은이 게시물에서 적응 : 사용자가 스크롤 한 후

function isScrolledIntoView(el) { 
    var elemTop = el.getBoundingClientRect().top; 
    var elemBottom = el.getBoundingClientRect().bottom; 

    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight); 
    return isVisible; 
}

그래서, 당신은 비디오 있는지 확인 수를 : check-if-element-is-visible-on-screen

function isOnScreen(element) 
{ 
    var curPos = element.offset(); 
    var curTop = curPos.top; 
    var screenHeight = $(window).height(); 
    return (curTop > screenHeight) ? false : true; 
} 
if(isOnScreen($('#myVideo'))) { $('#myVideo').play();};

출처

2016-06-18 23:15:32 grateful

은 (http://i.stack.imgur.com/ssRUr.gif) –

[ "* jQuery를 생명보다 쉽게 *을 만든다"] @ Derek 朕會功夫, 나에 동의합니까 아니면 냉소적입니까? 개인적으로 나는 "document.getElementById"를 입력하는 것에 질려합니다. – grateful

@Derek 朕會功夫, 하하하는 당신의 링크를 보았습니다. 훌륭합니다! – grateful

쉬운 사용을 위해 Jquery를 사용하십시오. 스크롤 기능을 사용하여 사용자가 비디오를 스크롤하면 비디오가 재생되도록 트리거합니다.

$(window).scroll(function(){ 
    var wScroll = $(this).scrollTop(); 
    if(wScroll > $('#myVideo').offset().top - ($(window).height()/1.2)) { 
     $('#myVideo').get(0).play() 
    } 
});

것은 당신의 HTML에 jQuery 라이브러리를 추가해야합니다

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

출처

2016-06-18 23:27:55

사용자가 동영상을 스크롤 할 때 html5로 내 동영상을 재생하려면 어떻게해야합니까?

답변

관련 문제