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

Posted 2023-02-19

【中文标题】动态加载内容上的自定义 video-js 宽度和高度

【英文标题】：Custom video-js width and height on Dynamically Loaded Content

【发布时间】：2016-09-03 21:55:44

【问题描述】：

我在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 将不会调整大小，反之亦然。有什么想法吗？

【参考方案1】：

您可以尝试使用 CSS 值进行更改。播放器是否加载都没有关系。即使在播放视频时，您也可以更改尺寸。

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

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

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

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

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