自定义video-js动态加载内容的宽度和高度

Question

我是foundation reveal中的dynamically loading video-js，每次加载时都必须触发宽度和高度。奇怪的是，一旦我在页面上加载了一个视频，它就不会再更改它了，它只坚持一个大小。

这是我的代码

    $(document).on('opened.fndtn', '[data-reveal]', function () {
        if($('.sd-video').length) {
            console.log('SD Detected');
            videojs($('.sd-video')[0], {"width": 640,"height": 480}, function() {});
        }
        if($('.hd-video').length) {
            console.log('HD Detected');
            videojs($('.hd-video')[0], {"width": 1287,"height": 720}, function() {});
        }
    });
    $(document).on('closed.fndtn', '[data-reveal]', function () {
        $('#'+$(this).attr('id')).html('');
    });

无论我怎么尝试，一旦加载了HD，SD就不会调整大小，反之亦然。有什么想法吗？

Answer 1

您可以尝试使用CSS值进行更改。播放器是否加载并不重要。即使在播放视频时，您也可以更改尺寸。

例如，您可以检查此示例https://codepen.io/caglar62/pen/BebKMX。

你可以像这样一键改变视频播放器的尺寸

<div class="container">
    <video id="my-video" class="video-js" controls preload="auto" width="870" height="364" ></video>
    <input type="button" value="Click me" onclick="changeSize()">
</div>    

<script>
   function changeSize(){
      document.getElementById("my-video").style.width = "200px";
   }
</script>

这只是一个简单的例子，但是你可以用同样的方法编写更复杂的算法来满足你的目的。