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

我想使用jQuery将视频文件源的路径加载到html5视频元素的源代码中。视频标签位于Bootstrap模式中，在模式打开之前不会加载。设置是这样的：如何将文件路径动态加载到html5源代码中？

<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>标签中。

任何接受者？

来源

2017-03-03 Guybrush Threepwood

我可能会简化事情，只有通过检查canPlayType与单个src工作，然后就加载相关的源

<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>

来源

2017-03-04 16:30:18 Offbeatmammal

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

回答

相关问题