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

时间:2016-11-03 08:25:41

标签: javascript html html5 video html5-video

在每个来源的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 =&#34; idname&#34;我的视频和源元素上的标签。

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

感谢阅读和任何可以提供的帮助/指导。

3 个答案:

答案 0 :(得分:1)

您尝试使用&#34;视频&#34;选择一个对象id所以尝试将id添加到您的来源:

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

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

答案 1 :(得分:0)

您可以拥有一个视频容器,每次选择一个新视频时,您都可以在容器内创建一个新元素,并使用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;

答案 2 :(得分:0)

如果你给视频一个id等于&#34; webVideo&#34;或者其他什么,你可以获得id,然后使用查询选择器来定位该id中的源标记。

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

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