JavaScript 用 loadedmetadata 获取视频的长宽比

技术分享 2023-12-11
JavaScript 用 loadedmetadata 获取视频的长宽比

创建 video 元素并监听 loadedmetadata 事件,在元数据加载后读取 videoWidth/videoHeight,相除即得视频长宽比。

1、创建一个

2、监听 loadedmetadata 事件,该事件在视频元数据加载后触发,此时可访问视频的宽高。

3、计算长宽比,通常是宽度除以高度。

// 创建 video 元素
var video = document.createElement('video');

// 设置视频源地址
video.src = 'path/to/your/video.mp4'; // 替换为你的视频文件路径

// 加载元数据
video.addEventListener('loadedmetadata', function() {
  var width = video.videoWidth;
  var height = video.videoHeight;
  var aspectRatio = width / height;
  console.log('视频的长宽比是:', aspectRatio);
});

// 如需在页面显示视频,可将其加入 DOM
// document.body.appendChild(video);