我一直在试图更改HTML5视频的源代码（在点击按钮后）。 但是我遇到了错误。 以下是代码和错误信息：
相关的HTML：
<video id="video2" playsinline controls muted preload="auto" style="z-index: -1; position: absolute;">
<source src="exercise_media/vid_exercise_sample_1.mp4" type="video/mp4" >
</video>
（有关z-index的部分 - 这个视频播放，然后被画布抓取并重新绘制，作为整个应用程序的一部分。可能不相关，但我想提一下。）
相关的Javascript。初始化视频，正常播放。这有点难懂，因为我是从别人的示例开始的。
loadCompanionVideo();
export async function loadCompanionVideo() {
setStatusText('Setting up companion video...');
try {
video2 = await loadVideo2();
} catch (e) {
let info = document.getElementById('info');
info.textContent = '(video player) this device type is not supported yet, ' +
'or this browser does not support video capture: ' + e.toString();
info.style.display = 'block';
throw e;
}
}
async function loadVideo2() {
const video2 = await setupVideo2();
return video2;
}
async function setupVideo2() {
const video2 = document.getElementById('video2');
video2.width = videoWidth2; // some external numbers
video2.height = videoHeight2; // just to customize width and height; works fine
return video2;
}
这个视频不错，我的第一个视频 exercise_media/vid_exercise_sample_1.mp4 播放得很好。然而，我想将视频源更改为同一文件夹中的 exercise_media/vid_exercise_sample_2.mp4 ，格式相同，等等。（我已经通过硬编码在上面的HTML中测试过此视频，并且它也可以正常播放。）
以下是我尝试更改的内容：
function buttonFunctionChangeVideoSrc() {
document.getElementById("video2").pause();
//document.getElementById("#video2 > source").src = "exercise_media/vid_exercise_sample_2.mp4";
document.getElementById("video2").src = "exercise_media/vid_exercise_sample_2.mp4";
document.getElementById("video2").load();
document.getElementById("video2").play();
}
徒劳无功，
("#video2 > source").src和("video2").src都无法工作。在第一种情况下，错误为：
Uncaught TypeError: Cannot set property 'src' of null at HTMLButtonElement 视频暂停并保持冻结状态。
在第二种情况下，尝试直接使用video2.src（与document.getElementById("video2")相同），错误是：
Uncaught (in promise) DOMException: Failed to load because no supported source was found.
视频部分的屏幕变成了白色/空白。
播放/暂停功能正常，因此我知道我有一个有效的对video2对象的引用。但我似乎无法更改源。我也知道另一个源视频完全正常，因为我可以将其硬编码到HTML中并播放它而没有问题。但我似乎无法在它们之间动态切换。
非常感谢任何帮助。
添加更多代码以查看。不要担心姿态问题，这是我的应用程序分析视频所需的，并且当我只有一个同时与网络摄像头并排放置的视频时，它可以正常工作（这就是我的应用程序所做的）。
问题在于我无法将video2源更改为另一个MP4。实际上，我唯一能够播放MP4的方法是在HTML中明确设置它。
HTML：
<div id="canvases" class="canvas-container">
<div id='main' style='display:none'>
<video id="video" playsinline style=" -moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
display: none;
">
</video>
<canvas id="output" class="camera-canvas"></canvas>
<canvas id="keypoints" class="camera-canvas"></canvas>
<video id="video2" playsinline controls muted style="z-index: -1; position: absolute;"
>
<source id="source2" src="exercise_media/vid_exercise_sample_1.mp4" type="video/mp4" >
<!-- hard-coding the src in source is the ONLY way I can play a video here at all... -->
</video>
<canvas id="output2" class="camera-canvas2"></canvas>
<canvas id="keypoints2" class="camera-canvas2"></canvas>
<canvas class="illustration-canvas"></cavnas>
<canvas class="illustration-canvas2"></cavnas>
</div>
Javascript：
export async function bindPage() {
setupCanvas();
setupCanvas2();
buttonSetup();
toggleLoadingUI(true);
setStatusText('Loading AI models...');
posenet = await posenet_module.load({
architecture: defaultPoseNetArchitecture,
outputStride: defaultStride,
inputResolution: defaultInputResolution,
multiplier: defaultMultiplier,
quantBytes: defaultQuantBytes
});
setStatusText('Loading FaceMesh model...');
facemesh = await facemesh_module.load();
facemesh2 = await facemesh_module.load();
setStatusText('Loading Avatar file...');
let t0 = new Date();
await parseSVG(Object.values(avatarSvgs)[0]);
setStatusText('Setting up camera...');
try {
video = await loadVideo();
} catch (e) {
let info = document.getElementById('info');
info.textContent = '(web cam) this device type is not supported yet, ' +
'or this browser does not support video capture: ' + e.toString();
info.style.display = 'block';
throw e;
}
try {
video2 = await loadVideo2();
} catch (e) {
console.log("Error loading companion video :: "+e);
}
console.log(video2); // shows the full html
playpauseFunction(); // start video2
toggleLoadingUI(false);
detectPoseInRealTime(video, posenet); //actual application, works fine
}
async function loadVideo2() {
const video2 = await setupVideo2();
return video2;
}
async function setupVideo2() {
const video2 = document.getElementById('video2');
//video2.setAttribute("src", vid_url_1); //does not work
//document.getElementById("source2").src = vid_url_2; // does nothing
videoWidth2orig = video2.videoWidth;
videoHeight2orig = video2.videoHeight; // gives the actual e.g. 640 x 360
//.. I do some stuff below to set video2 width/height, works fine
return video2;
}
function playpauseFunction() {
try {
if (playpause == true) {
video2.pause();
playpause = false;
//alert("Workout paused. Click Play/Pause to resume.");
} else if (playpause == false) {
video2.play();
playpause = true;
}
} catch (e) {
console.log("playpauseFunction exception :: "+e);
}
}
现在，像我说的那样，如果我将<source>标签中的src硬编码到HTML中，即<source id="source2" src="exercise_media/vid_exercise_sample_1.mp4" type="video/mp4" >，应用程序能够正常运行并显示如下图所示：
（可以正常工作，网络摄像头实时播放，右侧视频上有我的骨骼跟踪。）
我想做的是，点击“Exercise Sample 2”并更改右侧视频。但我尝试过的一切都没有奏效，例如：
function setupExercise2() {
video2.setAttribute('autoplay', 'true');
document.getElementById("source2").src = "exercise_media/vid_exercise_sample_2.mp4";
//video2.setAttribute("src", "exercise_media/vid_exercise_sample_2.mp4"); // have tried both, neither work
video2.load();
const playPromise = video2.play() // trigger video load
console.log(playPromise);
if ( playPromise !== undefined ) {
playPromise.then(() => {
// video should start playing as soon as it buffers enough
}).catch(error => {
// playback failed, log error
console.log(error);
})
}
}
针对第一行（未注释的行），控制台显示：
Promise{<pending>}__proto__: Promise[[PromiseState]]: "pending"[[PromiseResult]]: undefined
右侧视频变为白色，没有任何播放内容。如果我取消注释video2.setAttribute这一行，那么控制台就会记录如下信息：
Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: DOMException: Failed to load because no supported source was found.
code: 9
message: "Failed to load because no supported source was found."
name: "NotSupportedError"
__proto__: DOMException
明确一点，我可以在html中硬编码任何一个vid_exercise_sample_{2,3,..}.mp4并且它们都能正常播放和运行，所以我不认为这是问题所在。
希望现在我已经提供了一个相当全面的图景！
document.getElementById("#video2 > source")更改为document.querySelector("#video2 > source")。虽然这应该导致第二个错误，但是这个错误意味着浏览器不支持此URL指向的媒体格式。在开发工具的网络面板中双重检查返回的内容。 - Kaiido.src时可能会发生静默安全阻止问题。这方面没有问题。 (2) 另一个想法是尝试使用完整的 HTTP 路径（不仅仅是folder/filename.mp4的设置）。可能就是这么简单的事情。 (3) 尝试我的答案代码，它适用于我的测试，也应该适用于您... - VC.One