2016-10-27 2 views
0

버튼 클릭시 열리는 오버레이 div에 비디오가 있습니다. 오버레이를 닫고 비디오를 중지/일시 중지해야하는 비디오의 취소 버튼이 있습니다.취소 버튼을 클릭했을 때 내장 된 것을 정지/일시 중지하는 방법은 무엇입니까?

<html> 
<head> 
<style> 
div#overlay { 
    display: none; 
    z-index: 2; 
    background: #000; 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    text-align: center; 
} 
    div#specialBox { 
    display: none; 
    position: fixed; 
    z-index: 3000; 
    height: 100%; 
    width: 100%; 
    background: #FFF; 
    color: #000; 
} 
div#wrapper { 
    position:absolute; 
    top: 0px; 
    left: 0px; 
    padding-left:24px; 
} 
.closebtn 
{ 
    position: absolute; 
    top: 0%; 
    right: 45px; 
    font-size: 40px; 
} 
</style> 

<script> 
function toggleOverlay(){ 
    var overlay = document.getElementById('overlay'); 
    var specialBox = document.getElementById('specialBox'); 
    overlay.style.opacity = .8; 
    if(overlay.style.display == "block"){ 
     overlay.style.display = "none"; 
     specialBox.style.display = "none"; 
    } 
    else { 
     overlay.style.display = "block"; 
     specialBox.style.display = "block"; 
    } 
} 
function pauseVideo() 
{ 
    var vid = document.getElementById('myVid'); 
    vid.pause(); 
} 
</script> 
</head> 

<body> 
<!-- Start Overlay --> 
    <div id="overlay"> 
<!-- End Overlay --> 
<!-- Start Special Centered Box --> 
     <div id="specialBox"> 
      <iframe id="myVid" src="https://player.vimeo.com/video/183364240title=0&byline=0&portrait=0" width="100%" height="100%" frameborder="0"></iframe> 
      <div class="closebtn"> 
       <a href="javascript:void(0)" onclick="toggleOverlay(); pauseVideo()">&times;</a> 
      </div> 
     </div> 
<!-- End Special Centered Box --> 
    </div> 
<!-- Start Normal Page Content --> 
<div id="wrapper"> 
    <button onmousedown="toggleOverlay()">Apply Overlay</button> 
</div> 
<!-- End Normal Page Content --> 
</body> 
</html> 

그래서, 내가 취소 버튼을 클릭하면, 내가 (일어나는) 오버레이 사업부를 닫뿐만 아니라 비디오를 일시 정지 할 - 여기가 내가 뭐하는 거지입니다. 아무도 내가 잘못 가고 있다고 말할 수 있습니까?

답변

0

iframe을 일시 중지하여 실행중인 비디오를 중단 할 수 없습니다 (더미). :). vimeo API를 사용하려면 vimeo 링크를 사용하십시오. 다음과 같은 것을 할 일어날 수 있도록하려면

추가 스크립트 태그를 vimeocdn와 froogaloop2.js에 다음과 같이

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script> 

다음 : (비디오 URL을 참고 : 다음과 같이 동영상 URL에서 API를 = 1 개 쿼리 문자열 추가 ? 어떤 비디오가)로드되지 원인이 된 누락 된

https://player.vimeo.com/video/183364240?api=1&title=0&byline=0&portrait=0

마지막 : 당신의 pauseVideo 기능에 다음 코드를 넣습니다 :

function pauseVideo() 
{ 
    var players; 
    players=$('#myVid'); 

    $f(players[0]).api('pause'); 
} 

귀하의 요구를 충족시켜야합니다. (참고 : YouTube 동영상의 경우 유튜브 API를 방법과 절차를 사용 할 수 있습니다)

예제 코드 :이 도움이 http://codepen.io/Nasir_T/pen/pEmEJE

희망.

+0

멋진 작품입니다! 감사합니다 :) – AAA

+0

iframe을 일시 중지하여 동영상을 멈추게 할 수는 없습니까? 설명 할 수 있습니까? 또한 Apply Overlay Button을 다시 클릭하면 처음부터 비디오가 필요합니다. 그것에 대한 도움이 필요하십니까? – AAA

+0

$ f (플레이어 [0])의 일시 중지를 변경하십시오 .pi ('pause'); 오버로드를 적용하고 닫은 후 다시 오버레이 버튼을 클릭하면 비디오가 다시 시작되도록 설정됩니다. –

관련 문제