小编Chr*_*ger的帖子

我有一个包含 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 --> …