mediaelement.js - 具有固定最大尺寸的响应式视频答案

【问题标题】：mediaelement.js - Responsive video with fixed max sizemediaelement.js - 具有固定最大尺寸的响应式视频
【发布时间】：2014-05-17 08:44:34
【问题描述】：

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

我尝试设置style="max-width: 100%;，这适用于 Firefox 在我自己的服务器上使用视频，但在 Chrome 中，以及在 Firefox 和 Chrome 中链接到 YouTube 视频时，视频将放大以填充容器，无论为<video> 标签设置的width="" 和height="" 值。

我将给出我的 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>

有没有公认的方法来完成这个？

【问题讨论】：

您可以在小提琴中发布您的代码（嵌入视频）并在这里分享吗？
对不起，这个问题是2年前的问题。我不记得这段代码是从哪里来的。

标签： mediaelement.js html css video responsive-design mediaelement.js

【解决方案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 中保持输出代码一致。

【讨论】：