HTML ビデオの再生に Mediaelement を追加しようとしています。対処方法がわからない問題に遭遇し、質問したほうがよいと思いました。
ある場所では、ビデオ タグがライトボックス (正確にはカラーボックス) 内にあります。ストレート html5 ビデオは、ライトボックスのサイズを尊重します。利用可能なスペースを埋めてから、このスペース内に実際のビデオ フレームを合わせて、ビデオとライトボックスのアスペクト比が異なる空の「レター ボックス」を残します。
それは理にかなっていますか？つまり、ビデオの一部を切り取ることなく、ビデオを可能な限り大きくします。
Mediaelement にも同じことをしてもらいたいのですが、違うことをします。Mediaelement は毎回幅を埋めます。これにより、ライトボックスがビデオよりもワイドスクリーンになると、ビデオが切り取られます。ビデオでは、スクロールしてビデオの下部とコントロール セクションを表示することもできます。
幅と高さのオプションで遊んで、いくつかの基本的なcssオーバーライドを試しました。オプションenableAutosizeも変更しましたが、違いはありませんでした。動的に追加されるすべての html のサイズは、Javascript によって決定されるようです。
Mediaelement javascriptを拡張またはハッキングせずに、私が求めている結果を得るためにサポートされている、または意図された方法はありますか?
ビデオ コンテンツのサイズはさまざまであり、ライトボックスも動的にサイズ変更されることを付け加えておく必要があります。
$("a.cbox_group").colorbox({
rel:'cbox_group',
scalePhotos:true,
transition:"none",
width:"99%",
height:"99%",
maxWidth:"90%",
maxHeight:"100%",
});
$('video').mediaelementplayer({
loop: true,
enableAutosize: true,
features: ['playpause','progress','current','duration','fullscreen'],
alwaysShowControls: true,
pauseOtherPlayers: true,
});
Colorbox は、ブラウザ ウィンドウの大部分を占めるように設定されています。コンテンツのサイズを「ボックス」scalePhotos:trueに調整する機能があります。これにより、適切な高さが設定され、画像や元のビデオ タグに最適です。
Mediaelement がこれを検出すると、独自の処理を実行して、プレーヤーを 16:9 の縦横比にし、コンテンツの 1:1 ピクセル スケールに見えるようにします。
これが設定されていないことを確認した場合、つまりビデオ要素にサイズ属性がないことを確認すると、Mediaelement がenableAutosize:trueで起動し、垂直スクロールとコントロールが表示されなくなる可能性があります。
オンライン「テストケース」
私が抱えている問題を説明する静的なhtmlを抽出することができました。アプリケーションで使用する設定とほぼ同じカラーボックス ポップオーバーを開くリンクを含むページ。メディア要素が引き継ぐ前に未加工のビデオ要素を観察できるように、メディア要素の JavaScript を 2 秒の遅延に設定しました。
私が望むのは、生のビデオタグと同じ基本的な「レイアウト」（高さも幅もクリップしない）を許可する設定の組み合わせを見つけることですが、メディア要素コントロールと自動フォールバックとその他すべてを備えています。
ブラウザを非常にワイドスクリーンにして、わかりやすいようにします。