浏览器中的JavaScript视频：如何通过修改此示例代码来加载mp4视频？

问题描述

我找到了用于加载用户网络摄像头（有效）的示例代码，但我想对其进行修改以在项目文件夹中运行“ myvideo.mp4”。这是现有的代码：

async function setupVideo2() {
  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    throw new Error(
        'browser API navigator.mediaDevices.getUserMedia not available');
  }

  const video2 = document.getElementById('video2');
  video2.width = videoWidth2;
  video2.height = videoHeight2;

  const stream = await navigator.mediaDevices.getUserMedia({
    'audio': false,'video': {
      facingMode: 'user',width: videoWidth2,height: videoHeight2,},});
  video2.srcObject = stream;

  return new Promise((resolve) => {
    video2.onloadedMetadata = () => {
      resolve(video2);
    };
  });
}

我已经在其他地方调用此代码，并且可以正常工作并返回用户的网络摄像头。所以我认为修改此设置应该可以使用任意视频源，例如我的项目文件夹中有一个MP4文件。

解决方法

“ ...我能做video2.srcObject = './video_example.mp4';吗？
我收到TypeError：无法在'srcObject'上设置'HTMLMediaElement'属性：提供的值不是类型'MediaStream'。”

否，您必须使用.src来设置文件路径，而不要使用srcObjecct。

function setupVideo2() 
{
    const video2 = document.getElementById('video2');
    video2.width = videoWidth2;
    video2.height = videoHeight2;
    
    video2.src = "https://www.w3schools.com/tags/movie.mp4"; //# testable video link
}