Javascript设置/替换源src=在html5视频上" "

Question

在我的HTML中，我想使用javascript将正确的视频插入到匹配的源中，如下所示。

<script type="text/javascript">
var 1_video = '1.mp4';
var 2_video = '1.webm';
var 3_video = '1.ogv';
</script>
<video width="320" height="240" controls="controls">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source src="" type="video/mp4" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source src="" type="video/webm" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source src="" type="video/ogg" />
</video>

我发现所有的例子都在使用jquery，我不想使用jquery或任何外部库。

做这件事的最好方法是什么?我会做这样的事情，但我不想在我的视频和源元素上使用HTML id="idname"标签来实现这一点。

document.getElementById('video').src = 1_video;

感谢您的阅读和任何可以给予的帮助/指导。

Answer 1

你尝试选择一个id为"video"的对象，所以尝试将id添加到你的源:

<video width="320" height="240" controls="controls">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source src="" id="source-mp4" type="video/mp4" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source src="" id="source-webm" type="video/webm" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source src="" id="source-ogg" type="video/ogg" />
</video>

document.getElementById('source-mp4').src = 1_video;
document.getElementById('source-webm').src = 2_video;
document.getElementById('source-ogg').src = 2_video;

Answer 2

你可以有一个视频容器，每次你选择一个新视频时，你可以在容器中创建一个新元素并使用removeChild

删除旧元素

    /*Destroy current element inside the container*/
     container.removeChild(element);
    /*Create new element in the container*/
     var element  = container.createElement("VIDEO");
     element.src = XYZ-video;

Answer 3

如果你给视频一个id比如等于"webVideo"之类的，你可以得到这个id，然后使用查询选择器在这个id中定位源标签。

var videoSource = document.getElementById("webVideo").querySelector("source");
videoSource[0].src = "1_video";

然后使用videoSource[0]为mp4 videoSource[1]为webm和[2]为ogg