7

絶対位置の div があり、MediaElement.js でそれをビデオで埋める必要があります。ユーザーがウィンドウのサイズを変更すると、div のサイズが変更されます。ビデオのサイズも変更したいと思います。

私はこの男の方法を試しましたが、そのようにサイズを変更した後にビデオを全画面表示すると、全画面表示バージョンはフラッシュまたは html5 モードで画面全体を埋めなくなります。代わりに左上隅に表示されます。

実際、サイズ情報をまったく設定せずにフラッシュで全画面表示しても、UI がめちゃくちゃになってしまいます。シーク バーが一時停止/再生ボタンに重なってしまいます。

MediaElement.js は一貫性がなくバグだらけですが、私が見つけた中では最高のものです。Video.js とは異なり、フラッシュ フルスクリーンをサポートします。JWPlayer よりもカスタマイズとテーマ設定が簡単で、JWPlayer のようにシークしようとすると、Flash ビデオの最初に戻るだけではありません。その欠点を克服できれば、かなり便利です。

4

5 に答える 5

8

MediaElement.js を構成して、HTML5 プレーヤーと Flash プレーヤーの両方がコンテナーをいっぱいにし、それに応じてサイズを変更するようにするには、次のようにする必要があります。

$('video').mediaelementplayer({
  videoWidth: '100%',
  videoHeight: '100%',
  enableAutosize: true,
  plugins: ['flash'],
  pluginPath: '/swf/',
  flashName: 'flashmediaelement.swf'
});
于 2013-09-19T19:27:18.463 に答える
3

多くのテストを行った結果、動画属性の順序によって、メディア要素で動画を正しく再生する際に大きな違いが生じることがわかりました。以下の設定を使用すると、すべてのブラウザで YouTube 動画を再生およびサイズ変更できます。myvids div の 50% 幅は奇妙に見えますが、これがないと IE でビデオのサイズが適切に調整されません。現時点で解決しようとしている問題は 1 つだけです。iPad で開くと、再生ボタンがビデオの左上隅に移動します。パーセンテージの代わりにビデオの幅と高さを設定すると、再生ボタンは正しく表示されますが、プレーヤーのサイズが変更されません。

<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" />
    <span style="color:white;">Your browser does not support HTML5, Flash, or Silverlight.  Please update your browser.</span>
  </video>
</div>

$('video').mediaelementplayer({

    // if set, overrides <video width>
    videoWidth: -1,
    // if set, overrides <video height>
    videoHeight: -1,
    // width of audio player
    audioWidth: 400,
    // height of audio player
    audioHeight: 30,
    // initial volume when the player starts
    startVolume: 0.8,
    // useful for <audio> player loops
    loop: false,
    // enables Flash and Silverlight to resize to content size
    enableAutosize: true,
    // the order of controls you want on the control bar (and other plugins below)
    features: ['playpause','progress','current','duration','tracks','volume','fullscreen'],
    // Hide controls when playing and mouse is not over the video
    alwaysShowControls: false,
    // force iPad's native controls
    iPadUseNativeControls: false,
    // force iPhone's native controls
    iPhoneUseNativeControls: false, 
    // force Android's native controls
    AndroidUseNativeControls: false,
    // forces the hour marker (##:00:00)
    alwaysShowHours: false,
    // show framecount in timecode (##:00:00:00)
    showTimecodeFrameCount: false,
    // used when showTimecodeFrameCount is set to true
    framesPerSecond: 25,
    // turns keyboard support on and off for this instance
    enableKeyboard: true,
    // when this player starts, it will pause other players
    pauseOtherPlayers: true,
    // array of keyboard commands
    keyActions: []
});
于 2012-09-19T02:48:17.253 に答える
2

私は、あなたに似た問題を解決しようとして、stackoverflow スレッドを掘り下げていました。MEJS 2.9.3 のダウンロードには、demo/mediaelementplayer-responsive.html の例が付属しており、div 内でビデオのサイズを変更するのに役立ちました。

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

そこから通常のように初期化してから、ラッパーのサイズを変更してください! 例はフルスクリーンも完全に行います。

于 2012-09-01T22:22:51.203 に答える
1

デフォルトでフラッシュを使用しました

$('video,audio').mediaelementplayer( { mode: 'auto_plugin' } );

私はコードを盗聴し、以下を読みました

mejs.MediaElementDefaults = {
// allows testing on HTML5, flash, silverlight
// auto: attempts to detect what the browser can do
// auto_plugin: prefer plugins and then attempt native HTML5
// native: forces HTML5 playback
// shim: disallows HTML5, will attempt either Flash or Silverlight
// none: forces fallback view
mode: 'auto',
// remove or reorder to change plugin priority and availability
plugins: ['flash','silverlight','youtube','vimeo'],
// shows debug errors on screen
enablePluginDebug: false,
// overrides the type specified, useful for dynamic instantiation
type: '',
于 2012-09-16T21:03:54.460 に答える