Mute HTML5 video on subsequent visit

Question

I am using Reveal Modal ( http://zurb.com/playground/reveal-modal-plugin ) to fire off a modal pop-up box on the visitor's first visit only , setting a cookie using jQuery Cookie ( https://github.com/carhartl/jquery-cookie ).

Here is the code for the modal (shows a GIF on mobile devices):

<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>

...and here is the Javascript that fires off the modal after checking for the cookie:

<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>

So, here's the issue: when my visitor shows up the first time, the video fires off perfectly and plays automatically, just like it should (a similar animated GIF plays on mobile devices only) ; however, the video has sound, and on subsequent visits the video autoplays and you hear the audio, but the modal doesn't visually fire off (the modal and video stays hidden).

I think the solution would be to somehow tie the video's mute attribute to the cookie checking Javascript (which determines whether the modal fires or not), but I'm not sure how to code that. Help?

Answer 1

something like this should work

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>' +

... adding the extra check for the cookie model_shown allows you to change if the video will autoplay, or will autoplay but be muted (if you would prefer it not to autoplay you could remove that, in which case the muted may also not be needed. I also added the controls so the user can control volume or play/pause manually if desired

hope this helps (if not quite what you need just comment and I'll try and get closer)