[英]Not able to dynamically change source of the HTML5 Video with Javascript
一直在嘗試更改 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 的東西——這個視頻播放然后被一個 canvas 抓取,它重新繪制它,作為整個應用程序的一部分。可能不相關,但我想我會提到它。)
相關 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
都不起作用。 在第一種情況下,錯誤是:
未捕獲的類型錯誤:無法在 HTMLButtonElement 處設置 null 的屬性“src”視頻暫停並保持凍結狀態。
在第二種情況下,直接嘗試video2.src
(與document.getElementById("video2")
相同),錯誤是
Uncaught (in promise) DOMException: 加載失敗,因為沒有找到支持的源。
屏幕的視頻部分變為白色/空白。
播放/暫停功能工作正常,所以我知道我對我的video2
object 有有效的參考。 但我似乎無法改變來源。 而且我也知道其他源視頻也可以正常工作,因為我可以將其硬編碼到 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
需要明確的是,我可以將任何vid_exercise_sample_{2,3,..}.mp4
硬編碼到 html 中,它們可以正常播放和運行,所以我不認為這是問題所在。
希望我現在提供了一個非常完整的圖片!
以下示例代碼顯示了動態更新的視頻.src
。
有兩個按鈕用於在不同來源之間切換。
它已經在 Windows PC 上使用 Chrome、Edge 和 Firefox 瀏覽器進行了測試。
<!DOCTYPE html>
<html><head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> </head>
<body>
<video id="video2" width="600" height="480" controls style="z-index: 1; overflow:hidden; position: absolute; top: 10px; left: 10px">
<source type="video/mp4">
</video>
<canvas id="myCanvas" width="600" height="480" style="z-index: 1; overflow:hidden; position: absolute; top: 10px; left: 640px">
</canvas>
<div style="z-index: 1; overflow:hidden; position: absolute; top: 510px; left: 10px">
<button onclick="ChangeVideoSrc( 1 )">Play Video 1</button>
<button onclick="ChangeVideoSrc( 2 )">Play Video 2</button>
</div>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var timer_DrawCanvas; //# updated later in code
//# Example video links that work on my testing...
vid_url_1 = "https://seed191.bitchute.com/pupNZR0eMW9M/4CU38o2lkgyj.mp4";
vid_url_2 = "https://seed171.bitchute.com/VBdNMrOHylJh/2BMyQPl6BSpZ.mp4";
//# Try your own links if the above works...
//vid_url_1 = "exercise_media/vid_exercise_sample_1.mp4"
//vid_url_2 = "exercise_media/vid_exercise_sample_2.mp4"
//# Set initial starting vid SRC (used on page load)
const myVid = document.getElementById("video2");
myVid.setAttribute("src", vid_url_1);
//# Setup event listeners
myVid.addEventListener("canplay", handle_Media_Events);
myVid.addEventListener("loadeddata", handle_Media_Events);
myVid.addEventListener("play", handle_Media_Events);
myVid.addEventListener("pause", handle_Media_Events);
myVid.addEventListener("ended", handle_Media_Events);
function drawVideo()
{
ctx.drawImage(myVid, 0, 0, 600, 480);
}
function ChangeVideoSrc( vidNum )
{
myVid.src = window[ "vid_url_" + vidNum ];
myVid.load();
}
function handle_Media_Events()
{
//# if enough data to begin playback
if ( event.type == "canplay" ) { myVid.play(); }
//# if first frame is available
if ( event.type == "loadeddata" )
{ ctx.drawImage( myVid, 0, 0, 600, 480 ); } //# draws re-sized
if ( event.type == "play" )
{ timer_DrawCanvas = setInterval( drawVideo, 30 ); }
if ( (event.type == "pause") || (event.type == "ended") )
{ clearInterval( timer_DrawCanvas ); }
}
</script>
</body>
</html>
希望這將為您實現“使用 Javascript 動態更改 HTML5 視頻源”的任務提供參考點。 探索還在繼續……
當你有機會測試代碼時問任何問題。
剛剛嘗試了一個快速的片段,它可以毫不費力地工作..太奇怪了..
我用的
const v = document.getElementById("vid"); const s = document.getElementById("src"); function changeVideo() { s.src = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'; v.load(); v.play(); console.log(s,v); } document.getElementById("change").onclick=changeVideo;
<video id="vid" controls autoplay style="width:75%"> <source id="src" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4"> </video><br/><br/> <button id="change">Change the video</button>
一定是遺漏了什么。 如果我看到一個活生生的例子,我可以肯定地說,但這完全取決於你。
否則在 W3 上發現這個
'警告:不要使用 async 關鍵字使您的 function 異步。 您將丟失稍后播放視頻所需的“用戶手勢令牌”。
您正在嘗試更改<video>
元素的來源,而不是<source>
元素。對於快速解決方案,只需向該元素添加一個“id”並相應地更改“src”屬性。
<source id="video2source" src="yoursource.vid">
JS
document.getElementById('video2source').src = 'newsource.vid';
請記住,一個好的做法是將 DOM 引用存儲在變量中。 如果您不一直執行 JS DOM 讀取,瀏覽器會更容易。
const vid2src = document.getElementById('video2source'); // define variable in the global scope
vid2src.src = 'newsource.vid'; // use the reference everywhere else
希望這可以幫助! =)
編輯..
有類似問題的問題: 更改 html5 視頻標簽上的源
編輯數量...
因為play()
方法是異步的,所以讓我們嘗試一個異步解決方案。 =)
const video = document.getElementById("video2");
video.setAttribute('autoplay', 'true'); // just in case
/// ... your previous code ... switch source, and so on and so on
const playPromise = video.play() // trigger video load
console.log(playPromise); // just check what the console tells you
if ( playPromise !== undefined ) {
playPromise.then(() => {
// video should start playing as soon as it buffers enough
}).catch(error => {
// playback failed, log error
console.log(error);
})
}
當 async 很棒時,到處使用它並不是最好的主意。而且有些方法(如load()
和play()
已經是異步的)。
在這個小提琴中:
https://jsfiddle.net/azdpu3Ly/13/
我使用定時器通過你的setupVideo2
function 觸發視頻源的變化。 但是,一旦我將await
添加到 function 調用中,它就會停止工作。
因此,請確保不要使用await
調用與視頻相關的函數或使用.then()
跟隨它。 同步代碼可以正常工作,你不會從前者獲得任何東西。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.