我该如何设置媒体元素.js /questions/tagged/mediaelement.js缩小视频以适应小屏幕尺寸,但不将其放大到超出其实际尺寸? (除了将其包装在正确大小的 div 中之外,如果我找不到更好的解决方案,我会回退到这个位置。)
我尝试过设置style="max-width: 100%;
这在 Firefox 中有效,使用我自己服务器上的视频,但在 Chrome 中,以及在 Firefox 和 Chrome 中链接到 YouTube 视频时,视频将放大以填充容器,无论width=""
and height=""
为<video>
tag.
我将给出 HTML 和输出的第一部分的示例。下列:
<video width="480" height="360" style="max-width: 100%;" src="http://example.com/video.mp4"></video>
在 Firefox 中生成这个(这就是我想要的):
<div class="mejs-container svg mejs-video" id="mep_0" style="width: 480px; height: 360px;">
<div class="mejs-inner">
<div class="mejs-mediaelement">
<video width="480" height="360" src="http://example.com/video.mp4" style="max-width: 100%;"></video>
Chrome 中是这样的(这不是我想要的):
<div id="mep_0" class="mejs-container svg mejs-video" style="width: 864px; height: 648px;">
<div class="mejs-inner">
<div class="mejs-mediaelement">
<video width="864" height="648" style="max-width: 100%; width: 100%; height: 100%;" src="http://example.com/video.mp4"></video>
是否有公认的方法来实现这一目标?
如果您使用 Firefox 输出代码
<div class="mejs-container svg mejs-video" id="mep_0" style="width: 480px; height: 360px;">
<div class="mejs-inner">
<div class="mejs-mediaelement">
<video width="480" height="360" src="http://example.com/video.mp4" style="max-width: 100%;"></video>
在您的原始脚本中,它应该可以解决问题并在 Firefox 和 Chrome 中保持输出代码一致。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)