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

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 中保持一致。