mediaelement.js - 固定最大尺寸的自适应视频 [英] mediaelement.js - Responsive video with fixed max size

问题描述

如何设置 mediaelement.js 可以缩小视频以适应小屏幕尺寸，但不要将它们放大到超过其实际尺寸？ （除了将它封装在正确大小的div中，如果我找不到更好的解决方案，我将回退到该大小的div。）

我试过设置 style =max-width：100％; 并且这适用于Firefox在我自己的服务器上使用视频，但在Chrome中以及在Firefox和Chrome中链接到YouTube视频时，无论 width =和 height =值集合如何，视频都会放大以填充容器为< video> 标记。

我将举例说明我的HTML和第一部分输出如下：

 < video width =480height =360style =max-width： 100％;src =http://example.com/video.mp4>< / video> 
  

在Firefox中生成这个（这是我想要的）：

 < div class =mejs-container svg mejs-videoid =mep_0style =width：480px; height：360px;> 
< div class =mejs-inner> 
< div class =mejs-mediaelement> 
< video width =480 height =360src =http://example.com/video.mp4style =max-width：100％;>< / video> 
  

这个在Chrome中（这不是我想要的）：

 < div id =mep_0class =mejs-container svg mejs-videostyle =width：864px; height：648px;> 
< div class =mejs-inner> 
< div class =mejs-mediaelement> 
< video width =864 height =648style =max-width：100％;宽度：100％; height：100％;src =http://example.com/video.mp4>< / video> 
  

有没有一种可以接受的方法来完成这项工作？

p>

 < div class =mejs-container svg mejs-videoid =mep_0style =width：480px; height：360px;> 
< div class =mejs-inner> 
< div class =mejs-mediaelement> 
< video width =480 height =360src =http://example.com/video.mp4style =max-width：100％;>< / video> 
  
 
 
 
在原始脚本中，它应该可以解决问题并保持Firefox和Chrome中的输出代码一致。
 
How can I set up mediaelement.js to scale videos down for small screen sizes, but not to scale them up above their actual size? (Other than wrapping it in a correctly sized div, which is what I will fall back to if I can't find a better solution.)

I've tried setting style="max-width: 100%; and this works in Firefox using videos on my own server, but in Chrome, and in both Firefox and Chrome when linking to YouTube videos, the videos will scale up to fill the container regardless of the width="" and height="" values set for the <video> tag.

I'll give an example of my HTML and the first part of the output. The following:
<video width="480" height="360" style="max-width: 100%;" src="http://example.com/video.mp4"></video>
Produces this in Firefox (which is what I want):
<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>
And this in Chrome (which is not what I want):
<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>
Is there an accepted method for accomplishing this?
解决方案
If you use the Firefox output code
<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>
in your original script, it should fix the problem and keep the output code consistent across Firefox and Chrome.

                        
这篇关于mediaelement.js  - 固定最大尺寸的自适应视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！