javascript

当前位置:首页 > 前端 > javascript

视频比例计算方法

✅ 总结公式(通用版): padding-bottom = (视频高度 / 视频宽度) * 100% ✅ 自动计算视频容器 padding-bottom 工具: <video id="myV...
✅ 总结公式(通用版):

padding-bottom = (视频高度 / 视频宽度) * 100%

✅ 自动计算视频容器 padding-bottom 工具:


<video id="myVideo" src="your-video.mp4" controls></video>

<script>
  const video = document.getElementById('myVideo');

  // 等待视频元数据加载完(含宽高信息)
  video.addEventListener('loadedmetadata', function () {
    const width = video.videoWidth;
    const height = video.videoHeight;

    const ratio = height / width;
    const paddingBottom = (ratio * 100).toFixed(2); // 保留2位小数

    console.log(`视频原始尺寸:${width} x ${height}`);
    console.log(`容器 padding-bottom 应设为:${paddingBottom}%`);

    // 可选:将这个值自动应用到某个容器上
    document.querySelector('.swiper-slide-video').style.paddingBottom = paddingBottom + '%';
  });
</script>


上一篇:js 翻译 中文英文互翻译

下一篇:已经是最后一篇

相关内容

文章评论

表情

共 0 条评论,查看全部
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~