微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

我已经尝试设置style =“max-width:100%;这可以在我自己的服务器上使用视频在Firefox中运行,但在Chrome中,以及在链接到YouTube视频时在Firefox和Chrome中,视频都会扩展到填充容器,无论为< 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>

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

解决方法

如果您使用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之间保持一致.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐