Geek Answers Handbook

Play mp4 video via javascript

I have a responsive site containing html5 video. I have javascript that checks to see if the size of the video elements exceeds a certain threshold. If so, it removes the controls, places the overlay image of the video play button on top of the video element, and then adds the click event to the container containing the video element. When a container is clicked, it copies the video into a modal dialog box and plays the video.

Here's quandary:

  • The webm version has no problems.
  • The mp4 version of the modal view has no problem in Safari.
  • If mp4 plays in place (i.e. large enough not to need a modal window), it plays perfectly.
  • The modal version of mp4 will not play in Chrome or IE.
  • However, it will work in Chrome or IE if I have a built-in DOM (like IE F12 tools).

Here you can see here .

Here's the HTML:

<div class="video modal-trigger col-lg-4 col-md-4 col-sm-4">
    <canvas></canvas>
    <video preload="auto" controls="controls" poster="img/why-autologel-poster.png">
        <source src="media/why-autologel.m4v" type='video/mp4'>
        <source src="media/why-autologel.webm" type='video/webm'>
    </video>
</div>
<div class="col-lg-8 col-md-8 col-sm-7">
    <h2 class="modal-heading">
        Why AutoloGel?
    </h2>
    <p class="modal-copy">
        See what AutoloGel offers to your patients.
    </p>
</div>

<!-- Modal Window -->
<div class="modal fade" id="modal-window" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body">
                <div class="media"></div>
                <div class="copy"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Here's the javascript:

$(document).ready(function() {

    // Play very small videos in modal box
    if ( $(window).width() > 750 ) {
        var modalvideo = document.getElementsByTagName('video');

        // Hide controls for very small videos
        for (var i = 0; i < modalvideo.length; i++) {
            if ( $(modalvideo[i]).width() < 470 ) {
                $(modalvideo[i]).removeAttr('controls');
                if ( $('html').hasClass('IE-9') ) {
                    $(modalvideo[i]).after('<img class="poster-overlay" src="img/poster-overlay-ie9.png" alt="play video">');
                } else {
                    $(modalvideo[i]).after('<img class="poster-overlay" src="img/poster-overlay.png" alt="play video">');
                }
            }
        }

        // Add click event to video container that brings up video in a modal window
        $('.modal-trigger').on("click", function() {
            if ( $(this).width() < 470 ) {
                // Get video, title and any copy text
                var media = $(this).html();
                var title = $(this).next().children('.modal-heading').text();
                var copy = $(this).next().children('.modal-copy').text();

                // Insert video, title and copy text into modal window
                $('.modal-title').html(title);
                $('.modal-body > .media').html(media);
                $('.modal-body > .copy').text(copy);
                $('#modal-window .poster-overlay').remove('');
                $('#modal-window').modal('show');

                // Autoplay video after modal window has rendered
                $('#modal-window').on('shown.bs.modal', function() {
                    modalvideo[modalvideo.length - 1].setAttribute('controls', 'controls');
                    modalvideo[modalvideo.length - 1].play();
                });

                // Stop play video when modal window is closed
                $('#modal-window').on('hide.bs.modal', function() {
                    modalvideo[modalvideo.length - 1].pause();
                });
            }
        });
    }
});

Thank you for your help!

+4
source share
2 answers

Figured it out.

The problem was in two parts. For Chrome, some of the cache quirks and copied DOM elements. I decided that it works when the developer tools are open because the cache is disabled. Just applying the random GET variable at the end of the src attribute for the copied video element to mark it as a different file than the one that was cached solved the problem.

IE () -. HubSpot Amazon S3 CDN, , /-, Internet Explorer . AWS , HubSpot , , . .

, :

$(document).ready(function() {
    // Play very small videos in modal box
    if ( $(window).width() > 750 ) {
        var allvideos = $('video');

        // Hide controls for very small videos
        for (var i = 0; i < allvideos.length; i++) {
            if ( $(allvideos[i]).width() < 470 ) {
                $(allvideos[i]).removeAttr('controls');
                if ( $('html').hasClass('IE-9') ) {
                    $(allvideos[i]).after('<img class="poster-overlay" src="img/poster-overlay.png" alt="play video">');
                } else {
                    $(allvideos[i]).after('<img class="poster-overlay" src="img/poster-overlay.png" alt="play video">');
                }
            }
        }

        // Add click event to video container that brings up video in a modal window
        $('.modal-trigger').on('click', function() {
            if ( $(this).width() < 470 ) {
                // Get video/img, title and any copy text
                var media = $(this).html();
                var title = $(this).next().children('.modal-heading').text();
                var copy = $(this).next().children('.modal-copy').text();
                if (! title.length) { title = '<br>'; }

                // Insert video, title and copy text into modal window
                var modalsrc = [];
                var modaltype = [];
                $(media).children('source').each(function() {
                    modalsrc.push( $(this).attr('src') );
                    modaltype.push( $(this).attr('type') );
                });
                $('.modal-title').html(title);
                $('.modal-body > .media').html(media);
                $('.modal-body > .copy').text(copy);
                $('#modal-window .poster-overlay').remove('');

                // Assign a random version to video src to bypass cache
                var modalsources = $('#modal-window source');
                var nocachesrc = '';
                for (var i = 0; i < modalsources.length; i++) {
                    nocachesrc = modalsrc[i] + '?rnd=' + Math.random()*Math.random();
                    modalsources[i].setAttribute('src', nocachesrc);
                    modalsources[i].setAttribute('type', modaltype[i]);
                }

                var modalvideo = $('#modal-window video');
                modalvideo[0].setAttribute('controls', 'controls');

                // Reveal modal window and play video
                $('#modal-window').modal('show');
                $('#modal-window').on('shown.bs.modal', function() {
                    modalvideo[0].play();
                });

                // Stop playing video when modal window is closed
                $('#modal-window').on('hide.bs.modal', function() {
                    modalvideo[0].pause();
                });
            }
        });
    }
});
+1

type , : type="video/mp4", , , .

0

More articles:


All Articles