后續訪問時將HTML5視頻靜音

Question

我使用的顯示模態（ http://zurb.com/playground/reveal-modal-plugin ）到斷火只在訪問者的首次訪問一個模式彈出框，設置使用jQuery曲奇（餅干https：//開頭的github .com / carhartl / jquery-cookie ）。

這是模式代碼（在移動設備上顯示GIF）：

<div id="myModal" class="reveal-modal">
</div>

<script type="text/javascript">
    var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);
    var myModal = document.getElementById('myModal');

    if(!isMobile) {
    // User-Agent is not IPhone, IPod, IPad, Android or BlackBerry
    myModal.innerHTML += '<video autoplay>' +
    '<source src="video/LogoOpening.mp4" type="video/mp4"/>' +
    '<source src="video/LogoOpening.ogg" type="video/ogg"/>' +
    '<source src="video/LogoOpening.webm" type="video/webm"/>' +
    '</video>' +
    '<a class="close-reveal-modal"><div class="button4">Close</div></a>';
    } else {
    myModal.innerHTML += '<img src="images/ThroughTheYears.gif" alt="Logo History" />' +
    '<a class="close-reveal-modal"><div class="button4">Close</div></a>' +
    '</div>';
    }
</script>

...這是檢查Cookie后觸發模式的Javascript：

<script>
    $(document).ready(function() {
    if ($.cookie('modal_shown') == null) {
        $.cookie('modal_shown', 'yes', { expires: 30, path: '/' });
        $('#myModal').reveal({
         animation: 'fade',                         //fade, fadeAndPop, none
         animationspeed: 500,                       //how fast animtions are
         closeonbackgroundclick: true,              //if you click background will modal close?
         dismissmodalclass: 'close-reveal-modal'    //the class of a button or element that will close an open modal
         });
    }
    });
</script>

所以，這就是問題所在：當我的訪客第一次出現時，視頻會完美啟動並自動播放，就像應該的那樣（類似的GIF動畫只能在移動設備上播放） ； 但是，視頻有聲音，隨后的訪問會自動播放視頻，您會聽到音頻，但是模態不會從視覺上觸發（模態和視頻保持隱藏）。

我認為解決方案將以某種方式將視頻的靜音屬性與Cookie進行檢查的Javascript（確定是否觸發模式）相關聯，但是我不確定如何編寫代碼。 救命？

Answer 1

這樣的事情應該工作

if (!isMobile) {
    // User-Agent is not IPhone, IPod, IPad, Android or BlackBerry
    if ($.cookie('modal_shown') == null) {
        myModal.innerHTML += '<video autoplay controls>'
    } else {
        myModal.innerHTML += '<video autoplay muted controls>'
    }
    myModal.innerHTML += '<source src="video/LogoOpening.mp4" type="video/mp4"/>' +
    ....
    ....
    '</video>' +

...添加cookie的額外檢查model_shown可以更改視頻是否將自動播放，或者將自動播放但被靜音（如果您不希望其不自動播放，則可以將其刪除，在這種情況下，靜音也可能不會被自動播放）我還添加了controls以便用戶可以根據需要手動控制音量或播放/暫停

希望這會有所幫助（如果不是您所需要的只是評論，我會盡力與您取得聯系）