视频标签在第一次加载时恢复正常之前会短暂丢失宽高比

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
</video>

<style>
  .video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9宽高比 */
    height: 0;
    overflow: hidden;
  }
  .video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<div class="video-container">
  <video controls>
    <source src="video.mp4" type="video/mp4">
  </video>
</div>

<video id="myVideo" controls>
  <source src="video.mp4" type="video/mp4">
</video>

<script>
  var video = document.getElementById("myVideo");
  video.addEventListener("loadedmetadata", function() {
    var aspectRatio = video.videoWidth / video.videoHeight;
    video.style.width = "100%";
    video.style.height = "auto";
    video.style.paddingBottom = (1 / aspectRatio) * 100 + "%";
  });
</script>