如何将文件路径动态加载到 html5 源标签中？答案

【问题标题】：How can I dynamically load file path into html5 source tag?如何将文件路径动态加载到 html5 源标签中？
【发布时间】：2017-03-03 22:12:40
【问题描述】：

我正在尝试使用 jQuery 将视频文件源的路径加载到 html5 视频元素的源标签中。视频标签位于 Bootstrap 模式中，并且在模式打开之前不会被加载。设置是这样的：

<video class="video-element" controls>
    <source class="mp4" src="" type="video/mp4">
    <source class="webm" src="" type="video/webm">
    <source class="ogg" src="" type="video/ogg">
    Your browser doesn't support HTML5 video tag.
</video>

这是实际的问题：我能够将源路径添加到所有三个源标记中的 src 属性。但是，视频没有出现。

这是我测试和尝试过的。

我已经去掉了3个<source>标签，直接在<video>标签的src属性中添加了源路径。这样做，一切正常。视频出现并且可以播放。我使用 jQuery 动态执行此操作，就像我尝试使用 3 个 <source> 标签一样。
我已经在 html 中静态添加了 3 个<source> 标签的 src 属性的源路径，而不是使用 jquery 动态添加的。这也可以正常工作并且可以播放视频。
当我将路径动态添加到 3 个<source> 标签的 src 属性中时，我已经验证该路径是正确的。

因此，由于某种原因，当我将路径直接加载到 <video> 标签的 src 属性中以及当我将其静态放入 3 个 <source> 标签的 html src 属性中时，视频会播放，但不是在我用 jQuery 将它动态加载到 <source> 标签中。

有接受者吗？

【问题讨论】：

标签： jquery html video

【解决方案1】：

我可能会简化事情，只使用一个 src，方法是检查 canPlayType，然后加载相关源

<video class="video-element" id="video" controls>
    Your browser doesn't support HTML5 video tag.
</video>

<script>
var v = document.getElementById("video")
var vid = "video-file-name" // assumes all videos have the same file prefix, just different extensions
if (v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"') == "probably") {
    vid = vid + ".mp4"
} else if (v.canPlayType('video/webm; codecs="vp8.0, vorbis"') == "probably") {
    vid = vid + ".webm"
} else {
    vid = vid + ".ogg"
}
v.src = vid
</script>

【讨论】：