2016-05-04 31 views
3

私はhrefリンクによって呼び出されるブートストラップモーダルウィンドウを持っています。html5のクリックで自動再生を行う方法ブートストラップモードのビデオ?

モーダルコードは次のとおりです。

次のhrefのリンクのクリック時に呼び出された
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="pauseVideo()">&times;</button> 
       <div class="iframe-video"> 
          <video width='100%' id="video-gpro" src="someVideo.mp4" controls /> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 

<a class="play-button" href="#" data-toggle="modal" data-target="#videoModal" data-theVideo="someVideo.mp4"><div class="play-button"></div></a> 

問題は、私はクリックが発生した後、それを自動再生する必要があります。しかし、ビデオタグを自動再生として書き込むと、ページの読み込み時に自動再生が行われます。しかし、私は自動再生が '再生ボタン'のクリック後に起こる必要があります。

私をこれで分類してください。あなたはそれを再生し続けた場合、ビデオを一時停止し、逆に同じことを行うことができます

// when the modal is opened... 
$('#videoModal').on('show.bs.modal', function() { 
    // call play() on the <video> DOM element 
    $('#video-gpro')[0].play() 
}) 

答えて

3

私はこれを試してみませんでしたが、このような何かがあなたのために働くかもしれない... ....

// when the modal is opened... 
$('#videoModal').on('hide.bs.modal', function() { 
    // call pause() on the <video> DOM element 
    $('#video-gpro')[0].pause() 
}) 
関連する問題