完全响应式的HTML5视频

Question

8 浏览2023年5月1日

匿名的 2023年5月2日

0 Comments

有没有可能在一个绝对定位的元素中使用HTML5，使其根据窗口的宽度和高度进行调整，以防止任何裁剪？我看到的很多解决方案似乎依赖于</code>标签，而我没有，或者只根据宽度进行调整（我已经可以做到这一点）。</p> <p>基本上，我想找一种方法确保视频尽可能大，但在调整窗口大小时也不会被裁剪 - 即使在IE9中也是如此。（注意：视频必须保持其比例 - 所以如果有黑边也没关系。）</p> <p>这是我到目前为止尝试过的方法。</p> <pre class="brush: css">/*CSS*/ #player-overlay { position: absolute; display: none; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index:999; }</pre> <p></p> <pre class="brush: xml"> <video width="100%" video="100%" style="width:100%, height:100%"> <source src="../static/video/10s.mp4" /> <source src="../static/video/10s.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="../static/video/10s.ogv" type='video/ogg; codecs="theora, vorbis"' /> </video> </pre> <p></p> <p>在我看来，我要尝试编写一个JS解决方案。</p> </div> <div class="scisco-sq-comments"> <apcomments id="comments-468970" class="have-comments"></apcomments> </div> </div> <div class="scisco-sq-vote"><div id="vote_468970" class="ap-vote net-vote" ap-vote="{"post_id":468970,"active":"","net":0,"__nonce":"e78c057383"}"><a class="apicon-thumb-up ap-tip vote-up" href="#" title="投票支持这个帖子" ap="vote_up"></a><span class="net-vote-count" data-view="ap-net-vote" itemprop="upvoteCount" ap="votes_net">0</span><a data-tipposition="bottom center" class="apicon-thumb-down ap-tip vote-down" href="#" title="对此文章投反对票" ap="vote_down"></a></div></div> </div> </div>  </div> <apanswersw style="display:none"> <div id="ap-answers-c"> <div class="ap-sorting-tab clearfix"> <h3 class="ap-answers-label ap-pull-left" ap="answers_count_t"> <span itemprop="answerCount">0</span> 答案 </h3> <ul id="answers-order" class="ap-answers-tab ap-ul-inline clearfix"><li class="active"><a href="https://it.jidaohang.com/question/468970/?order_by=active#answers-order">活跃</a></li><li><a href="https://it.jidaohang.com/question/468970/?order_by=voted#answers-order">已投票</a></li><li><a href="https://it.jidaohang.com/question/468970/?order_by=newest#answers-order">最新</a></li><li><a href="https://it.jidaohang.com/question/468970/?order_by=oldest#answers-order">最老的</a></li></ul> </div> <div id="answers"> <apanswers> </apanswers> </div> </div> </apanswersw> <div class="scisco-login-form"> <form name="loginform" id="loginform" action="https://it.jidaohang.com/wp-login.php" method="post"><p class="login-username"> <label for="user_login">用户名或电子邮箱地址</label> <input type="text" name="log" id="user_login" autocomplete="username" class="input" value="" size="20" /> </p><p class="login-password"> <label for="user_pass">密码</label> <input type="password" name="pwd" id="user_pass" autocomplete="current-password" spellcheck="false" class="input" value="" size="20" /> </p><p class="login-submit"> <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="登录" /> <input type="hidden" name="redirect_to" value="https://it.jidaohang.com/question/468970/" /> </p></form> <ul class="scisco-login-form-links"> <li> <a href="https://it.jidaohang.com/wp-login.php?action=register">注册</a> </li> <li> <a href="https://it.jidaohang.com/wp-login.php?action=lostpassword">Lost Password</a> </li> </ul> </div> <div class="related-questions"> <div id="question-320235" style="margin: 5px auto 0"> <div class="ap-questions-inner"> <div class="ap-questions-summery" style="padding: 0;margin: 0"> <span class="ap-questions-title" itemprop="name"> <a class="ap-questions-hyperlink" itemprop="url" target="_blank" href="https://it.jidaohang.com/question/320235/" rel="bookmark" title="视频标签object-fit的替代方案">视频标签object-fit的替代方案</a> </span> <div class="ap-display-question-meta"> </div> </div> </div> </div> <hr style="margin-top: 0.75rem;margin-bottom: 0.75rem;"> <div id="question-472481" style="margin: 5px auto 0"> <div class="ap-questions-inner"> <div class="ap-questions-summery" style="padding: 0;margin: 0"> <span class="ap-questions-title" itemprop="name"> <a class="ap-questions-hyperlink" itemprop="url" target="_blank" href="https://it.jidaohang.com/question/472481/" rel="bookmark" title="在HTML中裁剪视频？">在HTML中裁剪视频？</a> </span> <div class="ap-display-question-meta"> </div> </div> </div> </div> <hr style="margin-top: 0.75rem;margin-bottom: 0.75rem;"> <div id="question-483927" style="margin: 5px auto 0"> <div class="ap-questions-inner"> <div class="ap-questions-summery" style="padding: 0;margin: 0"> <span class="ap-questions-title" itemprop="name"> <a class="ap-questions-hyperlink" itemprop="url" target="_blank" href="https://it.jidaohang.com/question/483927/" rel="bookmark" title="在纯CSS和HTML中，将视频作为div背景。">在纯CSS和HTML中，将视频作为div背景。</a> </span> <div class="ap-display-question-meta"> </div> </div> </div> </div> <hr style="margin-top: 0.75rem;margin-bottom: 0.75rem;"> <div id="question-467858" style="margin: 5px auto 0"> <div class="ap-questions-inner"> <div class="ap-questions-summery" style="padding: 0;margin: 0"> <span class="ap-questions-title" itemprop="name"> <a class="ap-questions-hyperlink" itemprop="url" target="_blank" href="https://it.jidaohang.com/question/467858/" rel="bookmark" title="HTML部分高度等于视口的100%">HTML部分高度等于视口的100%</a> </span> <div class="ap-display-question-meta"> </div> </div> </div> </div> <hr style="margin-top: 0.75rem;margin-bottom: 0.75rem;"> <div id="question-292654" style="margin: 5px auto 0"> <div class="ap-questions-inner"> <div class="ap-questions-summery" style="padding: 0;margin: 0"> <span class="ap-questions-title" itemprop="name"> <a class="ap-questions-hyperlink" itemprop="url" target="_blank" href="https://it.jidaohang.com/question/292654/" rel="bookmark" title="使用CSS按比例调整对象元素的高度与宽度+常数">使用CSS按比例调整对象元素的高度与宽度+常数</a> </span> <div class="ap-display-question-meta"> </div> </div> </div> </div> <hr style="margin-top: 0.75rem;margin-bottom: 0.75rem;"> <div id="question-320242" style="margin: 5px auto 0"> <div class="ap-questions-inner"> <div class="ap-questions-summery" style="padding: 0;margin: 0"> <span class="ap-questions-title" itemprop="name"> <a class="ap-questions-hyperlink" itemprop="url" target="_blank" href="https://it.jidaohang.com/question/320242/" rel="bookmark" title="只需要对如何让背景视频适应屏幕并带有叠加文字进行一些验证。">只需要对如何让背景视频适应屏幕并带有叠加文字进行一些验证。</a> </span> <div class="ap-display-question-meta"> </div> </div> </div> </div> <hr style="margin-top: 0.75rem;margin-bottom: 0.75rem;"> <div id="question-320237" style="margin: 5px auto 0"> <div class="ap-questions-inner"> <div class="ap-questions-summery" style="padding: 0;margin: 0"> <span class="ap-questions-title" itemprop="name"> <a class="ap-questions-hyperlink" itemprop="url" target="_blank" href="https://it.jidaohang.com/question/320237/" rel="bookmark" title="如何在IE上将视频适应整个屏幕">如何在IE上将视频适应整个屏幕</a> </span> <div class="ap-display-question-meta"> </div> </div> </div> </div> <hr style="margin-top: 0.75rem;margin-bottom: 0.75rem;"> <div id="question-470983" style="margin: 5px auto 0"> <div class="ap-questions-inner"> <div class="ap-questions-summery" style="padding: 0;margin: 0"> <span class="ap-questions-title" itemprop="name"> <a class="ap-questions-hyperlink" itemprop="url" target="_blank" href="https://it.jidaohang.com/question/470983/" rel="bookmark" title="HTML5和Javascript只在可见时播放视频。">HTML5和Javascript只在可见时播放视频。</a> </span> <div class="ap-display-question-meta"> </div> </div> </div> </div> <hr style="margin-top: 0.75rem;margin-bottom: 0.75rem;"> <div id="question-458440" style="margin: 5px auto 0"> <div class="ap-questions-inner"> <div class="ap-questions-summery" style="padding: 0;margin: 0"> <span class="ap-questions-title" itemprop="name"> <a class="ap-questions-hyperlink" itemprop="url" target="_blank" href="https://it.jidaohang.com/question/458440/" rel="bookmark" title="HTML5视频尺寸">HTML5视频尺寸</a> </span> <div class="ap-display-question-meta"> </div> </div> </div> </div> <hr style="margin-top: 0.75rem;margin-bottom: 0.75rem;"> <div id="question-276622" style="margin: 5px auto 0"> <div class="ap-questions-inner"> <div class="ap-questions-summery" style="padding: 0;margin: 0"> <span class="ap-questions-title" itemprop="name"> <a class="ap-questions-hyperlink" itemprop="url" target="_blank" href="https://it.jidaohang.com/question/276622/" rel="bookmark" title="强制调整图像大小并保持纵横比">强制调整图像大小并保持纵横比</a> </span> <div class="ap-display-question-meta"> </div> </div> </div> </div> <hr style="margin-top: 0.75rem;margin-bottom: 0.75rem;"> <div id="question-181266" style="margin: 5px auto 0"> <div class="ap-questions-inner"> <div class="ap-questions-summery" style="padding: 0;margin: 0"> <span class="ap-questions-title" itemprop="name"> <a class="ap-questions-hyperlink" itemprop="url" target="_blank" href="https://it.jidaohang.com/question/181266/" rel="bookmark" title="调整图像大小，以保持纵横比">调整图像大小，以保持纵横比</a> </span> <div class="ap-display-question-meta"> </div> </div> </div> </div> <hr style="margin-top: 0.75rem;margin-bottom: 0.75rem;"> <div id="question-456315" style="margin: 5px auto 0"> <div class="ap-questions-inner"> <div class="ap-questions-summery" style="padding: 0;margin: 0"> <span class="ap-questions-title" itemprop="name"> <a class="ap-questions-hyperlink" itemprop="url" target="_blank" href="https://it.jidaohang.com/question/456315/" rel="bookmark" title="调整HTML5画布大小以适应窗口">调整HTML5画布大小以适应窗口</a> </span> <div class="ap-display-question-meta"> </div> </div> </div> </div> <hr style="margin-top: 0.75rem;margin-bottom: 0.75rem;"> <div id="question-461919" style="margin: 5px auto 0"> <div class="ap-questions-inner"> <div class="ap-questions-summery" style="padding: 0;margin: 0"> <span class="ap-questions-title" itemprop="name"> <a class="ap-questions-hyperlink" itemprop="url" target="_blank" href="https://it.jidaohang.com/question/461919/" rel="bookmark" title="如何在<img>上模拟background-size: cover?">如何在<img>上模拟background-size: cover?</a> </span> <div class="ap-display-question-meta"> </div> </div> </div> </div> <hr style="margin-top: 0.75rem;margin-bottom: 0.75rem;"> <div id="question-473651" style="margin: 5px auto 0"> <div class="ap-questions-inner"> <div class="ap-questions-summery" style="padding: 0;margin: 0"> <span class="ap-questions-title" itemprop="name"> <a class="ap-questions-hyperlink" itemprop="url" target="_blank" href="https://it.jidaohang.com/question/473651/" rel="bookmark" title="在Chrome中使用HTML5视频进行搜索">在Chrome中使用HTML5视频进行搜索</a> </span> <div class="ap-display-question-meta"> </div> </div> </div> </div> <hr style="margin-top: 0.75rem;margin-bottom: 0.75rem;"> <div id="question-458760" style="margin: 5px auto 0"> <div class="ap-questions-inner"> <div class="ap-questions-summery" style="padding: 0;margin: 0"> <span class="ap-questions-title" itemprop="name"> <a class="ap-questions-hyperlink" itemprop="url" target="_blank" href="https://it.jidaohang.com/question/458760/" rel="bookmark" title="在加载时以特定位置开始播放HTML5视频？">在加载时以特定位置开始播放HTML5视频？</a> </span> <div class="ap-display-question-meta"> </div> </div> </div> </div> <hr style="margin-top: 0.75rem;margin-bottom: 0.75rem;"> <div id="question-179521" style="margin: 5px auto 0"> <div class="ap-questions-inner"> <div class="ap-questions-summery" style="padding: 0;margin: 0"> <span class="ap-questions-title" itemprop="name"> <a class="ap-questions-hyperlink" itemprop="url" target="_blank" href="https://it.jidaohang.com/question/179521/" rel="bookmark" title="CSS：如何相对于父元素的高度设置图像大小？">CSS：如何相对于父元素的高度设置图像大小？</a> </span> <div class="ap-display-question-meta"> </div> </div> </div> </div> <hr style="margin-top: 0.75rem;margin-bottom: 0.75rem;"> <div id="question-157593" style="margin: 5px auto 0"> <div class="ap-questions-inner"> <div class="ap-questions-summery" style="padding: 0;margin: 0"> <span class="ap-questions-title" itemprop="name"> <a class="ap-questions-hyperlink" itemprop="url" target="_blank" href="https://it.jidaohang.com/question/157593/" rel="bookmark" title="仅使用CSS和HTML实现垂直和水平居中的可变大小图像放大（在div中）">仅使用CSS和HTML实现垂直和水平居中的可变大小图像放大（在div中）</a> </span> <div class="ap-display-question-meta"> </div> </div> </div> </div> <hr style="margin-top: 0.75rem;margin-bottom: 0.75rem;"> <div id="question-320229" style="margin: 5px auto 0"> <div class="ap-questions-inner"> <div class="ap-questions-summery" style="padding: 0;margin: 0"> <span class="ap-questions-title" itemprop="name"> <a class="ap-questions-hyperlink" itemprop="url" target="_blank" href="https://it.jidaohang.com/question/320229/" rel="bookmark" title="如何使中心裁剪的图像具有响应性？">如何使中心裁剪的图像具有响应性？</a> </span> <div class="ap-display-question-meta"> </div> </div> </div> </div> <hr style="margin-top: 0.75rem;margin-bottom: 0.75rem;"> <div id="question-177043" style="margin: 5px auto 0"> <div class="ap-questions-inner"> <div class="ap-questions-summery" style="padding: 0;margin: 0"> <span class="ap-questions-title" itemprop="name"> <a class="ap-questions-hyperlink" itemprop="url" target="_blank" href="https://it.jidaohang.com/question/177043/" rel="bookmark" title="CSS3中的100vh在移动浏览器中不是常量。">CSS3中的100vh在移动浏览器中不是常量。</a> </span> <div class="ap-display-question-meta"> </div> </div> </div> </div> <hr style="margin-top: 0.75rem;margin-bottom: 0.75rem;"> <div id="question-292661" style="margin: 5px auto 0"> <div class="ap-questions-inner"> <div class="ap-questions-summery" style="padding: 0;margin: 0"> <span class="ap-questions-title" itemprop="name"> <a class="ap-questions-hyperlink" itemprop="url" target="_blank" href="https://it.jidaohang.com/question/292661/" rel="bookmark" title="确保元素保持指定的宽高比。">确保元素保持指定的宽高比。</a> </span> <div class="ap-display-question-meta"> </div> </div> </div> </div> <hr style="margin-top: 0.75rem;margin-bottom: 0.75rem;"> </div> </div> <aside class="col-12 col-xl-3 mt-5 mt-xl-0"> <div class="ap-question-info"> <div id="ap_search_widget-2" class="ap-widget-pos widget_ap_search_widget"> <form id="ap-search-form" class="ap-search-form" action="https://it.jidaohang.com/"> <div class="input-group"> <input type="text" class="form-control autocomplete-questions" placeholder="搜索问题..." name="s" /> <input type="hidden" name="post_type" value="question" /> <div class="input-group-append"> <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button> </div> </div> </form> </div> </div> </aside> </div> </div> </div> <div class="clearfix"></div> </div> </main> <div class="clearfix"></div> <footer id="scisco-footer"> <div id="footer-widgets"> <div class="container-fluid"> <div class="row"> <div class="col-12 col-lg-4 mb-5 mb-lg-0"> <div id="media_image-1" class="widget_media_image scisco-widget"><img width="482" height="128" src="https://it.jidaohang.com/wp-content/uploads/2023/02/cropped-logo-1-e1676604043929.png" class="image wp-image-10050 scisco-footer-logo attachment-full size-full" alt="" style="max-width: 100%; height: auto;" decoding="async" loading="lazy" srcset="https://it.jidaohang.com/wp-content/uploads/2023/02/cropped-logo-1-e1676604043929.png 482w, https://it.jidaohang.com/wp-content/uploads/2023/02/cropped-logo-1-e1676604043929-300x80.png 300w" sizes="(max-width: 482px) 100vw, 482px" /></div><div id="text-2" class="widget_text scisco-widget"> <div class="textwidget"><p>Lorem ipsum dolor sit amet, libero adipiscing elit. Donec et lacus ut quam ullamcorper aliquet id et sem. Neque tincidunt, ac pulvinar metus.</p> <p><a href="https://smartsqa.com">smartsqa</a></p> </div> </div></div> <div class="col-12 col-lg-4 mb-5 mb-lg-0"> </div> <div class="col-12 col-lg-4"> </div> </div> </div> </div> <div id="scisco-footer-bottom"> <div class="container-fluid"> <div class="row align-items-center"> <div class="col-12 col-md-6"> <p>Copyright 2023 | <a href="http://www.beian.miit.gov.cn">浙ICP备19008543号-1</a></p> </div> <div class="col-12 col-md-6 mt-3 mt-md-0"> </div> </div> </div> <div class="clearfix"></div> </div> </footer> </div> <div id="scisco-gototop" data-toggle="tooltip" data-placement="top" title="Go to Top"> <i class="fas fa-arrow-up"></i> </div> <script type="text/javascript" src="https://it.jidaohang.com/wp-includes/js/jquery/jquery.form.min.js" id="jquery-form-js"></script> <script type="text/javascript" src="https://it.jidaohang.com/wp-includes/js/underscore.min.js" id="underscore-js"></script> <script type="text/javascript" src="https://it.jidaohang.com/wp-includes/js/backbone.min.js" id="backbone-js"></script> <script type="text/javascript" src="https://it.jidaohang.com/wp-content/plugins/anspress-question-answer/assets/js/lib/selectize.min.js" id="selectize-js"></script> <script type="text/javascript" src="https://it.jidaohang.com/wp-content/plugins/anspress-question-answer/assets/js/common.js" id="anspress-common-js"></script> <script type="text/javascript" src="https://it.jidaohang.com/wp-content/plugins/anspress-question-answer/assets/js/question.js" id="anspress-question-js"></script> <script type="text/javascript" src="https://it.jidaohang.com/wp-content/plugins/anspress-question-answer/assets/js/ask.js" id="anspress-ask-js"></script> <script type="text/javascript" src="https://it.jidaohang.com/wp-content/plugins/anspress-question-answer/assets/js/list.js" id="anspress-list-js"></script> <script type="text/javascript" src="https://it.jidaohang.com/wp-content/plugins/anspress-question-answer/assets/js/notifications.js" id="anspress-notifications-js"></script> <script type="text/javascript" src="https://it.jidaohang.com/wp-content/plugins/anspress-question-answer/templates/js/theme.js" id="anspress-theme-js"></script> <script type="text/javascript" src="https://it.jidaohang.com/wp-content/plugins/anspress-question-answer//addons/syntaxhighlighter/syntaxhighlighter/scripts/shCore.js" id="syntaxhighlighter-core-js"></script> <script type="text/javascript" src="https://it.jidaohang.com/wp-content/plugins/anspress-question-answer//addons/syntaxhighlighter/syntaxhighlighter/scripts/shAutoloader.js" id="syntaxhighlighter-autoloader-js"></script> <script type="text/javascript" id="syntaxhighlighter-js-before"> /* <![CDATA[ */ aplang = aplang||{}; aplang.shLanguage = '语言'; aplang.shInline = '是内联的吗？'; aplang.shTxtPlholder = '在此处插入代码段...'; aplang.shButton = '插入编辑器'; aplang.shTitle = '插入代码'; window.apBrushPath = "https://it.jidaohang.com/wp-content/plugins/anspress-question-answer//addons/syntaxhighlighter/syntaxhighlighter/scripts/"; /* ]]> */ </script> <script type="text/javascript" src="https://it.jidaohang.com/wp-content/plugins/anspress-question-answer/addons/syntaxhighlighter/script.js" id="syntaxhighlighter-js"></script> <script type="text/javascript" src="https://it.jidaohang.com/wp-content/themes/scisco/js/popper.min.js" id="popper-js"></script> <script type="text/javascript" src="https://it.jidaohang.com/wp-content/themes/scisco/js/bootstrap.min.js" id="bootstrap-js"></script> <script type="text/javascript" src="https://it.jidaohang.com/wp-content/themes/scisco/js/smart-menu.js" id="smart-menu-js"></script> <script type="text/javascript" src="https://it.jidaohang.com/wp-content/themes/scisco/js/egemenerd-grid.js" id="egemenerd-grid-js"></script> <script type="text/javascript" src="https://it.jidaohang.com/wp-content/themes/scisco/js/custom.js" id="scisco-custom-js"></script> <script type="text/javascript" src="https://zz.bdstatic.com/linksubmit/push.js" id="baidu_zz_push-js"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?2d885967fd3d558a813e204302f07ff5"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html>