无法使用 Javascript 动态更改 HTML5 视频的来源

Question

一直在尝试更改 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工作。在第一种情况下，错误是：

未捕获的类型错误：无法在 HTMLButtonElement 处将属性“src”设置为 null 视频暂停并保持冻结状态。

在第二种情况下，video2.src直接尝试（与 相同document.getElementById("video2")），错误是

未捕获（承诺）DOMException：无法加载，因为找不到支持的源。

屏幕的视频部分变为白色/空白。

播放/暂停功能工作正常，所以我知道我有一个对我的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);
    }
}

现在，就像我说的，如果我将srcof<source>标签硬编码到 HTML中，即<source id="source2" src="exercise_media/vid_exercise_sample_1.mp4" type="video/mp4" >应用程序运行良好，如下所示：

（工作正常，网络摄像头在视频旁边实时播放，我的骨骼跟踪在播放时在右侧视频上运行。）

我想要做的是单击例如“练习示例 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注释的行，则控制台会记录：

<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>

需要明确的是，我可以将任何内容硬编码vid_exercise_sample_{2,3,..}.mp4到 html 中，并且它们可以正常播放和运行，所以我认为这不是问题所在。

希望我现在提供了一个非常完整的图片！

Answer 1

您正在尝试更改<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 video 标签上的源

编辑编号...

由于该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);
   })
}