Question

我在dynamically loading video-js内foundation reveal，每次加载时都必须触发宽度和高度。奇怪的是，一旦我在页面上加载了一个视频，无论如何都不会再改变它，它只会粘在一个尺寸上。

这是我的代码

    $(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>

这只是一个简单的示例，但是您可以使用相同的方法编写适合您目的的更复杂的算法。

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

1 个答案: