javascript - 使用 JavaScript 调整 HTML 多个全宽视频的大小

Question

我知道可以使用 CSS 在页面上制作全宽视频，但我使用 Javascript 库来显示视频，因为它在我使用的模板中具有一些漂亮的皮肤和其他功能。它非常适合单个视频，但模板将调整大小硬编码为 ID 标签，我正在努力让它与具有不同 ID 标签的多个不同视频一起使用。第二个容器不调整大小。这是代码:

    <section class="wrapper">
        <section class="full-width">
            <video id="video1" controls poster="img/poster.jpg" >
                <source src="media/sample.mp4" type="video/mp4"/>
            </video>
        </section>
    </section>

    <!-- video2 markup is almost identical to video1 --> 

    function htmlVideo() {
        videojs("video1", {
          controlBar: {
            timeDivider: false,
            fullscreenToggle: false,
            playToggle: false,
            remainingTimeDisplay: false
          },
          "height": "auto",
          "width": "auto"
        }).ready(function() {
          var myPlayer = this;
          var aspectRatio = 9 / 16;
          function resizeVideoJS() {
              var width = document.getElementById(myPlayer.id()).parentElement.offsetWidth;
              myPlayer.width(width).height(width * aspectRatio);
              // I added these two lines but they don't work
              var width2 = document.getElementById("video2").parentElement.offsetWidth;
              document.getElementById("video2").width(width2).height(width2 * aspectRatio);
          }
          resizeVideoJS();
          window.onresize = resizeVideoJS;
        });

      // I added the following code as well trying to initialize the
      // video, but it doesn't work
      videojs("video2", {
        controlBar: {
        timeDivider: false,
        fullscreenToggle: false,
        playToggle: false,
        remainingTimeDisplay: false
      },
      "height": "auto",
      "width": "auto"
      }).ready(function() {
        resizeVideoJS();
    });
 }

Answer 1

确保每个播放器实例引用一个player对象(由库提供)，而不是直接引用video元素dom节点。