如何使 MediaElement.js 流畅?

发布于 2025-01-03 11:08:44 字数 520 浏览 0 评论 0原文

我一直在研究代码,但似乎无法让它工作。我用谷歌搜索,在这个网站上搜索了 13 页,但我仍然找不到我正在寻找的答案。

我想让视频以特定尺寸开始,然后随着我调整浏览器大小(从桌面到 iPad/iPhone)而缩小。

我尝试过执行以下操作,但视频保持不变。没有任何东西可以缩放。

<div id="myVideo" style="width:640px; height:360px">
    <video id="player1" width="100%" height="100%" style="width:100%; height:100%;">
        <!-- Pseudo HTML5 -->
        <source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
    </video>
</div>

我应该采取什么不同的做法?

I've been playing around with the code and I can't seem to get this to work. I've googled, searched on this site looking through 13 pages and I still can't find the answer to what I'm looking for.

I want to have a video start out with a specific dimension and then scale down as I resize the browser (going from desktop to iPad/iPhone).

I've tried doing the below, but the video stays the same. Nothing scales.

<div id="myVideo" style="width:640px; height:360px">
    <video id="player1" width="100%" height="100%" style="width:100%; height:100%;">
        <!-- Pseudo HTML5 -->
        <source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
    </video>
</div>

What should I be doing differently?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

国粹 2025-01-10 11:08:44

将视频节点的高度/宽度属性设置为原始视频大小,但将样式宽度/高度保持为 100%,如下所示

<video id="player1" width="640px" height="360px" style="width:100%; height:100%;">

,然后根据需要调整 myVideo div 的大小,mejs 应按预期响应

set your video node's height/width attributes to the original video size, but keep the style width/height at 100% like this

<video id="player1" width="640px" height="360px" style="width:100%; height:100%;">

then resize your myVideo div as necessary and mejs should respond as expected

二智少女 2025-01-10 11:08:44

好吧,您在 #myVideo div 上设置了特定大小 (640px 360px),因此内部的视频元素是该框的 100%。如果您删除像素尺寸 - 或尝试将它们更改为最大 - 它应该是可扩展的。

Well, you have a specific size (640px 360px) set on the #myVideo div, so the video element inside is 100% of that box. If you remove the pixel dimensions - or try changing them to max- -- it should be scalable.

七七 2025-01-10 11:08:44

这有效。 myvids div 中的 width = "50%" 适用于 IE。如果没有它,视频将无法正确填充播放器。视频属性的顺序似乎确实很重要。

<div class="myvids" id="viddivap1" width="50%" style="width:100%; position:relative;">
    <video class="thevid" width="640" height="360" style="max-width:100%; height:100%;" id="my_video_ap1" preload="auto" autoplay controls="controls" >
        <source type="video/youtube" src="http://www.youtube.com/watch?v=FAGL9gxhdHM" />
    </video>
</div>

This works. The width = "50%" in the myvids div is there for IE. Without it the video does not properly fill the player. Order of the video attributes really seems to matter.

<div class="myvids" id="viddivap1" width="50%" style="width:100%; position:relative;">
    <video class="thevid" width="640" height="360" style="max-width:100%; height:100%;" id="my_video_ap1" preload="auto" autoplay controls="controls" >
        <source type="video/youtube" src="http://www.youtube.com/watch?v=FAGL9gxhdHM" />
    </video>
</div>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文