mediaelement.js - カラーボックスの MediaElementPlayer

Question

何を試しても、MediaElementPlayer を Colorbox で動作させることができません。私がこれまでに行った最善のことは、Chrome と IE9 で動作するようになったことです。作業する mp4 ファイルしかないので、今のところ FF でテストしていません。IE8 (標準モード) で試してみると、Colorbox リンクをクリックしてアクティブ化したときに、ビデオがロードされて再生されますが、コントロールボタンが表示されません。ただし、再生と一時停止は正常に行われます。カーソルがビデオの中央あたりのポインターに変わるので、おそらくコントロールはそこにありますが、何らかの理由で非表示になっています。Colorboxモーダルを閉じて再度開くと、本当の問題が発生します。モーダルが開きますが、空です - ビデオが読み込まれません。この時点で Colorbox モーダルを閉じようとすると、IE コンソールに次のエラーが表示されます。

SCRIPT438: オブジェクトはこのプロパティまたはメソッドをサポートしていません mediaelement-and-player.js、行 3049 文字 4

問題のある行が何であるか疑問に思っている場合に備えて...

delete t.node.player;

MediaElementPlayer インスタンスを破棄しようとすると、どうやら IE8 が気に入らないようです。確認したところ、Flash は正常にロードされ、ビデオを再生しています。Fiddler2 を使用してトラフィックをキャッチし、問題を把握しようとしましたが、何も表示されません。この単純化されたサンプルコードでは、video 要素の source 要素に src 属性を設定していますが、prod コードではこれを行うことができません。なんで？IE は "preload='none'" 属性を完全に無視し、IE9 はそれらを再生できるため、ページが読み込まれるとすべてが読み込まれます。たまに動画が多いので、これはありえない。Colorbox リンクがクリックされたときに実行時にソースをロードする実際の例がありますが、これと同じ問題が発生します。ページをリロードせずにビデオを複数回開くことができる必要があります。各ビデオは、(コントロールを除いて) 1 回だけ正しく読み込まれ、再生されるように見えますが、その後は再度読み込まれません。私のコードを見て、これを解決するためにできることがあるかどうかを確認してください:

<div id="all-container">
    <div id="cbox-links">
        <a href="#video0" width="360px" height="203px" class="cbox cboxElement">Video 1</a><br>
        <a href="#video1" width="720px" height="405px" class="cbox cboxElement">Video 2</a><br>
    </div>
    <div id="mep-container">
        <div class="hidden">
            <video id="video0" width="360" height="203">
                <source src="//s3.amazonaws.com/path-to-video/big_buck_bunny.mp4" type="video/mp4">
            </video>
        </div>
        <div class="hidden">
            <video id="video1" width="720" height="405">
                <source src="//s3.amazonaws.com/path-to-video/larger_video.mp4" type="video/mp4">
            </video>
        </div>
    </div>
</div>

これが私のスクリプトです：

<script>
    var player = null;
    $(".cbox").colorbox({
        inline: true,
        scrolling: false,
        onOpen: function () {

        },
        onComplete: function () {
            var cboxLink = $(this);

            player = new MediaElementPlayer(cboxLink.attr("href"), {
                alwaysShowControls: true,
                features: [ "playpause", "progress", "volume" ],
                plugins: ['flash'],
                pluginPath: '//s3.amazonaws.com/base-folder/scripts/mediaelement/',
                flashName: 'flashmediaelement.swf',
                success: function (mediaElement, domObject) {
                    console.log("loaded");
                }
            });

            var width  = cboxLink.attr("width");
            var height = cboxLink.attr("height");
            $.fn.colorbox.resize({innerWidth: width, innerHeight: height});
        },
        onCleanup: function () {
            player.pause();
            player.remove();
        }
    });
</script>

mediaelement.js - カラーボックスの MediaElementPlayer

0 に答える 0

Related

Reference