javascript - MediaElement.js - ビデオのサイズを動的に変更する方法は?

Question

動画をさまざまなサイズで読み込む方法は知っていますが、サイズを変更する方法がわかりません。たとえば、私のアプリでは、ビデオ パネルのサイズを変更できます。その後、ビデオのサイズを変更したいと思います。問題は、作成されたいくつかの要素があり、すべての子要素のサイズ変更を避け、組み込み関数を使用することです。

このオプションを発見しましたが、それはやや大雑把な解決策のように見えました。

Answer 1

<div id="video-wrapper">
    <video width="640" height="360" style="width: 100%; height: 100%;" id="player1">
        <source/>
    </video>
</div>

2.9.3 ダウンロードの一部である demos/mediaelementplayer-responsive.html ドキュメントを介して (これも github にあります)。インラインスタイルが醜いことは知っていますが...うまくいきます！必要に応じてビデオ ラッパーのサイズを変更するだけです (jquery の例):

var newHeight = 360 / 640 * newWidth;
$('#video-wrapper').css('width',newWidth);
$('#video-wrapper').css('height',newHeight+'px');

Answer 2

YouTubeとVimeoのデフォルトのビデオプレーヤーの場合、これは多くの場合、ビデオのサイズを「応答的に」変更するのに役立ちます：http: //FitVidsjs.com/

私は友人にMediaElement.jsなしでWordPressでそれを使用してもらいました。ブラウザのサイズ変更で機能しましたが、周囲にブラックボックスが残っていました。2つをうまく連携させることができるかどうか、テストページでお知らせください。:)