我一直在试图更改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