通过javascript播放mp4视频

Question

我有一个响应站点，包含html5视频。我有一些javascript可以检查视频元素的大小是否低于某个阈值。如果是，它将移除控件，将视频播放按钮覆盖图像放置在视频元素的顶部，然后将click事件添加到保存视频元素的容器中。当点击容器时，它会将视频复制到一个模态对话框中并播放视频。

现在的困境是：

• webm版本没有任何问题。
• modal视图的mp4版本在Safari中没有问题。
• 如果mp4播放到位（即足够大，不需要模态窗口），则播放效果良好。
• modal视图的mp4版本不会在Chrome或IE中播放。
• 但是，如果我打开了Chrome或IE的内置DOM检查器（例如IE的F12工具），它将在Chrome或IE中工作。

这一点可以在这里看到。

以下是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>

下面是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();
                });
            }
        });
    }
});

谢谢你的帮助！

Answer 1

从源节点的type属性中删除分号，应该是:type=“video/mp4”，其他浏览器可能会原谅这一点。

Answer 2

想通了。

问题分两部分。对于Chrome，它的缓存和复制的DOM元素有些怪异。我想当开发人员工具打开时，它还能工作，因为缓存被禁用了。只需在src属性的末尾为复制的video元素应用一个随机GET变量，将其标记为不同于缓存的文件即可解决问题。

和IE有点不一样。HubSpot使用AmazonS3作为它的CDN，当我查看视频文件的头时，它的内容类型被设置为Application/Octet-Stream，而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();
                });
            }
        });
    }
});