使用 JavaScript 定位 HTML 中的视频源
Target video source in HTML with JavaScript
通过 JavaScript 编辑源后,我的视频无法播放,你能帮我解决这个问题吗?
HTML : <video class="background-video" controls muted loop autoplay>
<source id="vid_tag" type="video/mp4"></video>
JS : document.querySelector('#vid_tag').src = "_1/video/bvid_1.mp4"
可能是路径错误,可能是你写错了,浏览器找不到。
可能的解决方案:
(1) 修正 HTML:
ID应该写在<video>
标签的设置中(不要放在<source>
标签中)
<video id="vid_tag" class="background-video" controls muted loop autoplay>
<source src="nothing.mp4" type="video/mp4">
</video>
(2) 修复 JS:
将 document.querySelector('#vid_tag')
替换为更直接的内容,例如 document.getElementById("vid_tag")
,您可以通过所需元素的特定 ID 访问。
document.getElementById("vid_tag").src = "_1/video/bvid_1.mp4"; //# set new src
document.getElementById("vid_tag").load(); //# decode (process) the new file
当您设置 <source>
元素的 src
属性时,您需要调用 <video>
的 .load()
method 以获取新值:
document.querySelector("button").addEventListener("click", (evt) => {
const url = "https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm";
document.querySelector("source").src = url;
document.querySelector("video").load(); // required
}, { once: true });
<video controls muted loop autoplay>
<source id="vid_tag" type="video/webm">
</video>
<button>set source</button>
但是,如果您动态设置了 src
,则最好不要再使用 <source>
。
如果您使用它是因为它能够在面对不受支持的格式时回退,请改用 <video>.canPlayType()
方法:
document.querySelector("button").addEventListener("click", (evt) => {
const url = "https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm";
const video = document.querySelector("video");
if (video.canPlayType("video/webm")) {
video.src = url;
}
else {
// to-do: load an other source
console.warn("format is not supported");
}
}, { once: true });
<video controls muted loop autoplay></video>
<button>set source</button>
通过 JavaScript 编辑源后,我的视频无法播放,你能帮我解决这个问题吗?
HTML : <video class="background-video" controls muted loop autoplay>
<source id="vid_tag" type="video/mp4"></video>
JS : document.querySelector('#vid_tag').src = "_1/video/bvid_1.mp4"
可能是路径错误,可能是你写错了,浏览器找不到。
可能的解决方案:
(1) 修正 HTML:
ID应该写在<video>
标签的设置中(不要放在<source>
标签中)
<video id="vid_tag" class="background-video" controls muted loop autoplay>
<source src="nothing.mp4" type="video/mp4">
</video>
(2) 修复 JS:
将 document.querySelector('#vid_tag')
替换为更直接的内容,例如 document.getElementById("vid_tag")
,您可以通过所需元素的特定 ID 访问。
document.getElementById("vid_tag").src = "_1/video/bvid_1.mp4"; //# set new src
document.getElementById("vid_tag").load(); //# decode (process) the new file
当您设置 <source>
元素的 src
属性时,您需要调用 <video>
的 .load()
method 以获取新值:
document.querySelector("button").addEventListener("click", (evt) => {
const url = "https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm";
document.querySelector("source").src = url;
document.querySelector("video").load(); // required
}, { once: true });
<video controls muted loop autoplay>
<source id="vid_tag" type="video/webm">
</video>
<button>set source</button>
但是,如果您动态设置了 src
,则最好不要再使用 <source>
。
如果您使用它是因为它能够在面对不受支持的格式时回退,请改用 <video>.canPlayType()
方法:
document.querySelector("button").addEventListener("click", (evt) => {
const url = "https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm";
const video = document.querySelector("video");
if (video.canPlayType("video/webm")) {
video.src = url;
}
else {
// to-do: load an other source
console.warn("format is not supported");
}
}, { once: true });
<video controls muted loop autoplay></video>
<button>set source</button>