0

私はサイトでMediaElement.jsを使用しようとしていますが、IE以外のすべてのブラウザー、特にIE9ですべてがうまく機能します(現時点ではIE9未満のサポートにはあまり関心がありません)。読んだMEに動的にデータを入力していると、特にIEで問題が発生する可能性がありますが、回避策があるかどうかはわかりません。私がこのようにしている理由は、これがすべてのプロジェクトデータがgetJSON呼び出しによって読み込まれ、読み込まれるとすべてのプロジェクトに適切なデータが入力されてその場で作成されるポートフォリオサイトだからです。いくつかのビデオプロジェクトがあります。私は、基本的にこれと同じ動作を行うプロジェクト外の例にコードを落とし込みました。HTMLを書き出してJSで制御すると機能しますが、JSを使用してHTMLを作成してから再生しようとすると、エラーログが表示されます(コードでのMEプレーヤーの作成)。コードは次のとおりです。

$(function() {
            var details = {
                    width: 640,
                    height: 480,
                    src: 'work/television/1'
                },
                $body = $('body'),
                $vid = $('<video width="' + details.width + '" height="' + details.height + '" preload="none" id="vidPlayer1"></video>'),
                $mp4 = $('<source src="' + details.src + '.mp4" type="video/mp4" title="mp4">'),
                $webm = $('<source src="' + details.src + '.webm" type="video/webm" title="webm">'),
                $ogg = $('<source src="' + details.src + '.ogv" type="video/ogg" title="ogg">'),
                $flash = $('<object width="' + details.width + '" height="' + details.height + '" type="application/x-shockwave-flash" data="swf/flashmediaelement.swf"><param name="movie" value="swf/flashmediaelement.swf"><param name="flashvars" value="controls=true&file=' + details.src + '.mp4"></object>'),
                $error = $('<p>The available video formats are not supported by your browser. :(</p>'),
                $controls = $('<div class="videoControls playBtn"></div>');

            $body.append($controls);

            $vid.append($mp4);
            $vid.append($webm);
            $vid.append($ogg);
            $vid.append($flash);
            $vid.insertAfter($controls);

            var vidPlayer = new MediaElementPlayer('#vidPlayer1', {
                features: [],
                // mode: 'shim',
                pluginPath: 'swf/',
                success: function(mediaElement) {
                    console.log('success', mediaElement);
                },
                error: function() {
                    console.log('Error loading player.  Please try again.');
                }
            });

            $body.on('click', function(evt) {
                vidPlayer.play();
            });
        });

どんな助けでも大歓迎です。

4

1 に答える 1

0

問題が解決しました。興味のある人のために、追加を 1 つの呼び出しに結合する必要があったため、$vid は次のようになりました。

$vid = $('<video width="' + details.width + '" height="' + details.height + '" preload="none" id="vidPlayer-' + row + '-' + slide + '"><source src="' + details.src + '.mp4" type="video/mp4" title="mp4"><source src="' + details.src + '.webm" type="video/webm" title="webm"><source src="' + details.src + '.ogv" type="video/ogg" title="ogg"><p>The available video formats are not supported by your browser. :(</p></video>')

すべてを 1 つのステートメントに入れるだけで、IE9 はそれを適切に認識しました。この問題は、ソース変数が追加されなかったため、IE がビデオのソースを認識できなかったために追加したことによるものでした。

これが将来誰かに役立つことを願っています。

于 2012-07-24T16:10:55.163 に答える