如何用JS添加多个视频源？

Question

编辑：我认为我没有正确解释自己。

我需要为我的视频设置（通过 javascript） 多个视频源。

例如设置：

<source type="video/mp4" src="video.mp4"></source>
<source type="video/ogg" src="video.ogg"></source>

有没有办法做到这一点？另外，如果我只有一个当前网络浏览器不支持的视频，它会退回到 flash 吗？

我正在使用 mediaelementjs（和 jquery）（简而言之，我需要点击一张图片，然后神奇地浏览器支持的视频（另一个视频）必须加载）。

谢谢！

Answer 1

是的，你可以设置多个来源，浏览器只会加载支持的来源，如果不支持 HTML5 视频，它会加载 embed 标签（flash）

这里是一个例子：

<video poster="myvideo.jpg" controls>
 <source src="myvideo.m4v" type="video/mp4" />
 <source src="myvideo.ogg" type="video/ogg" />
 <embed src="/to/my/video/player"></embed>
</video>

---已编辑---

所以，您想动态添加更多源标签。就像一个点击功能。你有一些选择：

1. 您只需更改视频元素中的src 属性即可；
2. 您可以更改每个源元素的src 属性；
3. 您可以创建更多源元素并将所有元素附加到视频元素中；

在任何这些情况下，您都需要在更改或添加源后运行视频元素的load 和play 函数；

PS：请记住，只会播放一个源，即浏览器可以读取的源。所以你不能添加很多视频（比如不同的视频，而不是不同的扩展）并期望创建一个播放列表；

关于它的更多问题：

• Changing source on HTML5 video tag
• Changing video being played in HTML5 video