HTML-视频高度自适应解决方法

墨蓝 2022-05-17 12:25 818阅读 0赞

使用开源video.js  
项目地址：[https://github.com/videojs/video.js][https_github.com_videojs_video.js]  
代码：

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
            <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
            <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
            <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
    
            <style> body { padding: 0; margin: 0; } div.videocontent { width:100%; } div.wrapper { max-width:750px; margin: 0 auto; } </style>
        </head>
    
        <body>
            <div class="wrapper">
                <div class="videocontent">
                    <video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls preload="none" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
                        <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
                    </video>
                </div>
            </div>
        </body>
    
    </html>

核心是设置视频比例：**vjs-16-9** 或者 **vjs-4-3**  
视频居中class：**vjs-big-play-centered**

[https_github.com_videojs_video.js]: https://github.com/videojs/video.js

发表评论取消回复

表情：

评论列表（有 0 条评论，818人围观）

还没有评论，来说两句吧...

相关阅读

相关 element 解决table高度自适应

表格高度自适应常见使用场景：table 区域需要表格撑满并且当表格内容超出时在table区域显示滚动条 ![watermark_type_ZmFuZ3poZW5naG

心已赠人/ 2023年10月05日 18:54/ 0 赞/ 2 阅读

相关 html页面高度自适应的特点,css如何高度自适应浏览器高度？

高度自适应就是高度能跟随浏览器窗口的大小改变而改变，典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏，下面一栏高度自适应用于显示内容。 ![682b19391f3

悠悠/ 2022年10月06日 08:00/ 0 赞/ 330 阅读

相关 HTML 高度自适应布局

定义：高度自适应表示，在浏览器窗口边界变化，或在浏览器显示比例调整，这一过程中，浏览器中元素随着上述变化而自适应改变 height 属性值的特性。原理：当一个元素是

偏执的太偏执、/ 2022年09月26日 00:21/ 0 赞/ 196 阅读

相关 iframe自适应高度解决方案

经常会有父页面需要通过iframe嵌入另一个子页面,又要适时根据子页面的高度调整父页面中iframe的高度，这就要求页面必须具有自适应功能。自适应思想比较简单：就是父页面中i

╰半夏微凉°/ 2022年08月22日 00:10/ 0 赞/ 216 阅读

相关总结iframe高度自适应，自适应子页面高度

在网上找了很多iframe的高度自适应，发现很多兼容性都不是很好，于是自己总结了一下。页面html节点上要有 <!DOCTYPE html PUBLIC "-//W3C

怼烎@/ 2022年07月24日 10:07/ 0 赞/ 310 阅读

相关 iframe 高度设置、iframe 自适应高度方法总结

所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固

拼搏现实的明天。/ 2022年07月24日 10:06/ 0 赞/ 472 阅读

相关转：解决Div自适应高度的方法

原文地址：http://www.yutheme.cn/website/index.php/content/view/39/63.html 原文中的方法3好用:) 原文如下：

曾经终败给现在/ 2022年07月12日 15:53/ 0 赞/ 231 阅读

相关 HTML-视频高度自适应解决方法

使用开源video.js 项目地址：[https://github.com/videojs/video.js][https_github.com_videojs_video

墨蓝/ 2022年05月17日 12:25/ 0 赞/ 819 阅读

相关 html textarea文本域高度自适应

1、可直接在 [菜鸟教程网站测试页面中测试][Link 1] <!DOCTYPE html> <html> <head> <meta cha

怼烎@/ 2022年03月17日 13:10/ 0 赞/ 309 阅读

相关高度自适应

开发中遇到一个问题，要求不管在多高的屏幕下，图片(什么都行)到底部的距离都应该和psd一致，flash里面的问题 ![70][] //定义宽度 var psdWidth

约定不等于承诺〃/ 2021年09月16日 06:40/ 0 赞/ 509 阅读