MediaElement.jsを流体にするには？

私はコードを使いこなしてきましたが、これを動作させることはできません。私はgoogled、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/ –

それを試してみてください。私はこの時点でメディアクエリーを行っていますが、スマートフォンのメディアクエリーは機能していません。この例では、ブラウザのサイズを変更すると動作しません： '@media only screen and（最小幅：320ピクセル）と（最大幅：480ピクセル）' –

#myVideo divには特定のサイズ（640ピクセル×360ピクセル）が設定されているため、内部の動画要素はそのボックスの100％です。ピクセルサイズを削除するか、または最大サイズに変更してみると、スケーラブルでなければなりません。

出典

2012-02-17 20:25:52 Tim

これはMediaElement.jsでは機能しません（OPが使用しているもの）。固定寸法のみを扱うことができます。 – acme

そのハックが、私のために働いているhttp://stackoverflow.com/questions/22872915/mediaelement-js-responsive-video-with-fixed-max-size/34511368#34511368 – Vish

は、元のビデオサイズにあなたのビデオノードの高さ/幅の属性を設定したが、その後、あなたのmyVideoのdiv、必要に応じてサイズを変更し、期待通りmejsが応答しなければならない。この

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

のように100％でスタイルの幅/高さを保ちます

出典

2012-09-01 22:15:52 starpause

奇妙な答えが、私のために働いた。ビデオ属性の幅/高さ（ピクセル単位）を設定するだけで、すでにChromeで動作していましたが、何らかの理由でFirefoxでは使用できませんでした。 CSSの幅/高さを100％追加すると、動画のサイズを動的に変更できるようになりました。ありがとう！ – Phil

アウトスタイル属性で*

これは私のために働いています。そのハック。 http://stackoverflow.com/questions/22872915/mediaelement-js-responsive-video-with-fixed-max-size/34511368#34511368 – Vish

これは機能します。 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>

出典

2012-09-19 02:55:47

MediaElement.jsを流体にするには？

答えて

関連する問題