video

2024年03月25日约600字预计需要2分钟

base

// 创建 <video> 元素
const video = document.createElement("video");

// 设置视频源
video.src = "video.mp4";

// 附加到页面
document.body.appendChild(video);

// 播放视频
video.play();

// 暂停视频
video.pause();

// 获取和设置当前视频播放的时间
video.currentTime = 30; // 将视频跳转到30秒处

// 获取视频总的时长
console.log(video.duration);

// 判断视频是否处于暂停状态
console.log(video.paused);

// 判断视频是否已结束播放
console.log(video.ended);

// 启用默认控件
video.controls = true;

// 设置视频的静音状态
video.muted = true;

loadedmetadata

在JavaScript中，可以通过DOM元素的addEventListener方法来监听loadedmetadata事件。例如，如果要监听视频元素的loadedmetadata事件，可以这样写：

const video = document.getElementById('myVideo');

video.addEventListener('loadedmetadata', function() {
  // 在这里编写处理loadedmetadata事件的代码
});

在loadedmetadata事件的处理函数中，您可以访问到视频元素的metadata属性，以获取有关视频的元数据信息，例如持续时间、视频宽高等。

video.addEventListener('loadedmetadata', function() {
  console.log('Duration: ' + video.duration + ' seconds');
  console.log('Width: ' + video.videoWidth + ' pixels');
  console.log('Height: ' + video.videoHeight + ' pixels');
});

当浏览器加载完视频的元数据后，就会触发loadedmetadata事件，并执行相应的处理函数。这样，您就能够在JavaScript中处理有关视频元数据的逻辑。

play

在video元素加载视频文件时，会依次触发 “loadedmetadata” 和 “play” 事件。

1 2	`<video id="videoElement" src="path/to/video.mp4" controls></video> <canvas id="canvasElement"></canvas>`

获取视频画面


// 获取 video 和 canvas 元素
const video = document.getElementById("videoElement");
const canvas = document.getElementById("canvasElement");
const ctx = canvas.getContext("2d");

// 监听 video 元素的 "loadedmetadata" 事件，在视频元数据加载完成后执行回调函数
video.addEventListener("loadedmetadata", () => {
  // 设置 canvas 的尺寸与视频尺寸相同
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
});

// 监听 video 元素的 "play" 事件，在视频播放时执行回调函数
video.addEventListener("play", () => {
  // 在每一帧视频播放期间
  function capturePreview() {
    if (video.paused || video.ended) {
      return;
    }
    
    // 将当前视频画面绘制到 canvas 上
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    // 在此处可以对画面进行进一步处理
    
    // 递归执行 capturePreview 函数，以获取连续的视频画面
    requestAnimationFrame(capturePreview);
  }
  
  // 开始获取视频画面
  capturePreview();
});