當模式打開時播放視頻，當它關閉時暫停

我擁有它，因此您單擊圖像，視頻在模式對話框中打開，然後您必須單擊播放。如果您點擊該視頻，則該視頻會繼續播放，除非該視頻已完成或已被預先暫停。當模式打開時播放視頻，當它關閉時暫停

如果我將視頻設置爲自動播放，則會在頁面加載時自動播放，而不是在對話框打開時自動播放。下面

代碼：

<img class="img-responsive portfolioImages center-block"  src="images/church1.jpg" alt="" data-toggle="modal" data-target="#1"> 
<div id="1" class="modal fade" tabindex="-1" role="dialog"> 
    <video controls class="center-block video"> 
     <source src="videos/big_buck_bunny.mp4" type="video/mp4"> 
     Your browser does not support HTML5 video. 
    </video> 
</div>

來源

2015-09-20 Alex

你怎麼打開模態對話框？ – dfsq

以及它如何關閉？該解決方案可能是一個簡單的JavaScript函數，當用戶單擊該按鈕時可以播放視頻並在模式關閉時暫停播放 – Aziz

您單擊圖像打開對話框，然後單擊視頻關閉它。 – Alex

由於您使用的引導模態，你可以連接到其hidden.bs.modal事件暫停視頻：

$('.modal').on('hidden.bs.modal', function() { 
    $('.video')[0].pause(); 
});

下面是這種方法的一個演示：

$('.modal').on('hidden.bs.modal', function() { 
 
    $('.video')[0].pause(); 
 
});

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<img class="img-responsive portfolioImages center-block" src="http://lorempixel.com/100/100" alt="" data-toggle="modal" data-target="#1"> 
 
<div id="1" class="modal fade" tabindex="-1" role="dialog"> 
 
    <video controls class="center-block video" style="width: 500px;"> 
 
    <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> Your browser does not support HTML5 video. 
 
    </video> 
 
</div>

來源

2015-09-20 13:05:23 dfsq

這一個完美的作品，但是你需要有enablejsapi=1在你的src，像這樣的例子：

<iframe src="https://www.youtube.com/embed/YOUR_VIDEO_CODE?rel=0&amp;controls=0&amp;showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe> 


function playStopVideo() { 
    var youtubeFunc =''; 
    var outerDiv = $("#myModal"); 
    var youtubeIframe = outerDiv.find("iframe")[0].contentWindow; 
    outerDiv.on('hidden.bs.modal', function (e) { 
     youtubeFunc = 'stopVideo'; 
     youtubeIframe.postMessage('{"event":"command","func":"' + youtubeFunc + '","args":""}', '*'); 
    }); 
    outerDiv.on('shown.bs.modal', function (e) { 
     youtubeFunc = 'playVideo'; 
     youtubeIframe.postMessage('{"event":"command","func":"' + youtubeFunc + '","args":""}', '*'); 
    }); 
} 

playStopVideo();

來源

2017-06-08 23:41:10

當模式打開時播放視頻，當它關閉時暫停

回答

相關問題