Question

如何设置mediaelement.js以缩小视频以适应小屏幕尺寸，但不能将它们放大到超过实际尺寸？（除了将它包装在一个正确大小的div中之外，如果我找不到更好的解决方案，这将是我会回归的。）

我已尝试设置style="max-width: 100%;，这可以在我自己的服务器上使用视频在Firefox中运行，但在Chrome，以及链接到YouTube视频时的Firefox和Chrome中，视频都会向上扩展以填充容器无论为width=""代码设置height=""和<video>值。

我将举例说明我的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>

是否有可接受的方法来实现这一目标？

Answer 1

如果您使用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中保持一致。

mediaelement.js - 具有固定最大尺寸的自适应视频

1 个答案: