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

debugcn 发表于 Dev

Guybrush Threepwood

我正在尝试使用 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>标签一样。
我已经<source>在 html 中静态地将源路径添加到 3 个标签的 src 属性，而不是动态地使用 jquery。这也可以正常播放并且视频播放。
当我将它动态添加到 3 个<source>标签的 src 属性时，我已经验证了路径是正确的。

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

有接班人吗？

另类哺乳动物

我可能会简化事情并且只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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。