通过 JavaScript 播放 mp4 视频

Question

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

这就是困境：

• webm版本没有任何问题。
• mp4版本的模态视图在Safari中没有问题。
• 如果 mp4 就地播放（即足够大，不需要模态窗口），它就可以正常播放。
• 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"，其他浏览器可能只是原谅这一点。