如何製作MediaElement.js流體？

我一直在玩代碼，我似乎無法得到這個工作。我搜索了這個網站，搜索了13頁，但我仍然無法找到我要找的答案。如何製作MediaElement.js流體？

我想讓視頻從特定維度開始，然後在調整瀏覽器大小（從桌面轉到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>

我應該做什麼不同？

來源

2012-02-08 Tony Bianco

這可能會有用 - http://fitvidsjs.com/。此外，你可能想考慮媒體查詢 - http://www.w3.org/TR/css3-mediaqueries/ – 2012-02-08 02:41:51

試過。我在這一點上一直關注媒體查詢，但是我的智能手機媒體查詢無法正常工作。當我調整瀏覽器大小時，此示例不起作用：'@media only screen and（min-width：320px）and（max-width：480px）' – 2012-02-08 03:16:04

那麼，您在#myVideo div上設置了特定尺寸（640px 360px），因此其中的視頻元素爲該框的100％。如果刪除像素尺寸 - 或者嘗試將它們更改爲最大 - 它應該是可縮放的。

來源

2012-02-17 20:25:52 Tim

這不適用於MediaElement.js（OP使用的是什麼）。它只能處理固定的尺寸。 – acme 2012-03-15 10:30:49

它的破解，但已爲我工作http://stackoverflow.com/questions/22872915/mediaelement-js-responsive-video-with-fixed-max-size/34511368#34511368 – Vish 2015-12-29 12:47:49

設置視頻節點的高度/寬度屬性的原始視頻的大小，但保持風格的寬度/高度爲100％這樣的

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

然後調整你爲myVideo DIV必要和預期MEJS應該響應

來源

2012-09-01 22:15:52 starpause

奇怪的答案，但它爲我工作。它已經在Chrome中工作了，只需設置視頻屬性的寬度/高度（以像素爲單位），但出於某種原因，不適用於Firefox。添加CSS寬度/高度100％使得我可以動態調整視頻大小。謝謝！ – Phil 2013-08-16 21:31:49

雖然只是添加到*

這對我有效。它是一個黑客。 http://stackoverflow.com/questions/22872915/mediaelement-js-responsive-video-with-fixed-max-size/34511368#34511368 – Vish 2015-12-29 12:46:41

This Works。在IE中，myvids div的寬度=「50％」。沒有它，視頻不能正確填充播放器。視頻屬性的順序似乎很重要。

<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>

來源

2012-09-19 02:55:47

如何製作MediaElement.js流體？

回答

相關問題