通过javascript播放mp4视频

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

这是一个难题：

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

这是可以看到的

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

为什么是凝胶？

看看AutoloGel为您的患者提供了什么。

&时代；
接近

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

$（文档）.ready（函数（）{
//在模式框中播放非常小的视频
如果（$（窗口）.width（）>750）{
var modalvideo=document.getElementsByTagName（'video'）；
//隐藏非常小的视频控件
对于（变量i=0；i.media'）.html（媒体）；
$（'.modal body>.copy'）.text（复制）；
$（“#模态窗口.海报覆盖”）。删除（“”）；
$（“#模态窗口”）.modal（'show'）；
//模式窗口渲染后自动播放视频
$（'#模态窗口'）.on（'show.bs.modal'，function（））{
modalvideo[modalvideo.length-1].setAttribute（'controls'，'controls'）；
modalvideo[modalvideo.length-1].play（）；
});
//模式窗口关闭时停止播放视频
$（'#模态窗口'）.on（'hide.bs.modal'，function（）{
modalvideo[modalvideo.length-1]。暂停（）；
});
}
});
}
});

---

谢谢你的帮助

从源节点的

type

属性中删除分号，应该是：

type=“video/mp4”

，其他浏览器可能刚刚原谅了这一点。

解决了这个问题

问题分为两部分。对于Chrome来说，它的缓存和复制的DOM元素有些古怪。我想当开发人员工具打开时它可以工作，因为缓存被禁用了。只需在复制的视频元素的src属性末尾应用随机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();
                });
            }
        });
    }
});

$（文档）.ready（函数（）{
//在模式框中播放非常小的视频
如果（$（窗口）.width（）>750）{
var allvideos=$（“视频”）；
//隐藏非常小的视频控件
对于（var i=0；i.media'）.html（媒体）；
$（'.modal body>.copy'）.text（复制）；
$（“#模态窗口.海报覆盖”）。删除（“”）；
//A