html5 视频上的 Javascript 设置/替换源 src=""答案

【问题标题】：Javascript setting / replacing source src="" on html5 videohtml5 视频上的 Javascript 设置/替换源 src=""
【发布时间】：2017-03-16 18:12:05
【问题描述】：

在每个来源的 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;

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

【问题讨论】：

标签： javascript html video html5-video

【解决方案1】：

您尝试选择具有“视频”ID 的对象，因此请尝试将 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;

【讨论】：

感谢示例而不是通过 ID 匹配是否可以通过 type="video/mp4" 进行匹配？
是的，我认为你可以做到，但这不适合原生 js，jquery 将使用 css 选择器简化你的工作：$('[type="video/mp4"]')
1_video 是一个无效的 JS 变量名。

【解决方案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;

【讨论】：

【解决方案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

【讨论】：