57


12

内部サイトで WMVビデオを使用しており、それらをWebサイトに埋め込んでいます。 これはInternet Explorerでは非常にうまく機能しますが、Firefoxではうまくいきません。 Firefoxで動作させる方法を見つけましたが、その後Internet Explorerで動作しなくなります。

私たちはまだSilverlightを使いたくありません。特に、すべてのクライアントがWindows Media Playerをインストールした状態でWindows XPを実行することが確実ではないためです。

WMPをInternet ExplorerとFirefoxの両方に埋め込むようなユニバーサルコードがありますか?それとも、ユーザーエージェント検出を実装し、ブラウザーごとに異なるHTMLを配信する必要がありますか?

9 Answer


46


FirefoxとInternet Explorerでは、次のように動作します。


21


http://malsup.com/jquery/media/[jQuery Media Plugin]を提案できますか。 WMVだけでなく、あらゆる種類のビデオ用の埋め込みコードを提供し、ブラウザの検出を行い、テンプレートからそのような面倒なswitch / case文をすべて排除します。


9


以下を使用してください。 FirefoxとInternet Explorerで動作します。


そしてJavaScriptでは、

function playVideo(){try {if(-1!= navigator.userAgent.indexOf( "MSIE"))} {var obj = document.getElementById( "MediaPlayer1"); obj.Play();

} else {var player = document.getElementById( "MediaPlayer2"); player.controls.play();

catch(エラー){alert(エラー)}

}


7


条件付きコメントを使用して、IEとFirefoxに異なる動作をさせることができます。

Firefox専用コード

ブラウザ自体は、読むことを意図していないコードを無視します。


7


Web上にビデオを展開するための最良の方法はFlashを使用することです - Webページにきれいに埋め込むことははるかに簡単で、多かれ少なかれあらゆるブラウザとプラットフォームの組み合わせで再生されます。 Windows Media Playerを使用する唯一の理由は、コンテンツをストリーミングしていて、非常に強力なデジタル著作権管理が必要な場合です。その場合でも、プロバイダはこれらに対してもFlashを使用し始めています。 すばらしい例はBBCのiPlayerを見てください。

社内でもFlashに切り替えることをお勧めします。 将来誰がそれにアクセスする必要があるのか​​わからない、そしてこれはあなたに最高の将来の互換性を与えるでしょう。

編集 - 2013年3月20日。 これらの古い質問が時々どのように浮上してくるのか興味深い! 今日の世界はどのように違うのか、そしてこれがどれほど古くなっているのかのようです。 私は今日のFlashのみのルートを絶対にお勧めしません。最近のベストプラクティスは、HTML 5を使用してH264エンコードビデオを埋め込むことです。ここで説明されているようにFlashフォールバックを使用します。


7


Elizabeth Castroはこの問題についての興味深い記事を持っています: ベイビー埋め込み。 彼女がこの問題をどのように攻撃したか、またQuickTimeコンテンツの処理方法について読む価値があります。


4


フラッシュビデオのエンコードは、ffmpegを使用すると実際には非常に簡単です。 1つのコマンドを使用して、ほぼすべてのビデオ形式から変換できます。ffmpegは、その他の部分を理解するのに十分賢いので、マシン上のすべてのプロセッサを使用します。 それを呼び出すのは簡単です:

ffmpeg -i input.avi output.flv

ffmpegはあなたが望むビットレートで推測するでしょう、しかし、あなたがそれを指定したいならば、あなたは-bオプションを使うことができます、それで例えば `-b 500000`は500kbpsです。 もちろんたくさんの選択肢がありますが、私は一般的にあまり手を加えることなく良い結果を得ています。 http://ffmpeg.mplayerhq.hu/ffmpeg-doc.html#SEC9 [video options]:これは、より多くのオプションを探している場合に開始するのに適した場所です。

あなたはフラッシュビデオを見せるために特別なウェブサーバーを必要としません。 私は、単に.flvファイルを標準のWebサーバーにプッシュし、http://flowplayer.org/ [flowplayer]のような優れたswfプレーヤーを使ってそれらにリンクするだけでうまくいきました。

WMVは、すべてのユーザーが常に使用することを確認できれば問題ありません。 [a recent, up to date version of] Windows only, but even then, Flash is 多くの場合、Webにより適しています。 プレイヤーは非常にスキンを細かくすることができ、JavaScriptで制御することができます。


4


私はMSDNでhttp://msdn.microsoft.com/en-us/library/windows/desktop/dd562847.aspx [FirefoxでのWMPの使用]についての良い記事を見つけました。

MSDNの記事に基づき、試行錯誤を重ねた結果、JavaScriptを使用する方が条件付きコメントまたはネストされた "EMBED / OBJECT"タグを使用するよりも優れていることがわかりました。

与えられた引数に基づいてWMPオブジェクトを生成するJS関数を作りました。

    function generateWindowsMediaPlayer(
        holderId,   // String
        height,     // Number
        width,      // Number
        videoUrl    // String
        // you can declare more arguments for more flexibility
        ) {
        var holder = document.getElementById(holderId);

        var player = '<object ';
        player += 'height="' + height.toString() + '" ';
        player += 'width="' + width.toString() + '" ';

        videoUrl = encodeURI(videoUrl); // Encode for special characters

        if (navigator.userAgent.indexOf("MSIE") < 0) {
            // Chrome, Firefox, Opera, Safari
            //player += 'type="application/x-ms-wmp" '; //Old Edition
            player += 'type="video/x-ms-wmp" '; //New Edition, suggested by MNRSullivan (Read Comments)
            player += 'data="' + videoUrl + '" >';
        }
        else {
            // Internet Explorer
            player += 'classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" >';
            player += '<param name="url" value="' + videoUrl + '" />';
        }

        player += '<param name="autoStart" value="false" />';
        player += '<param name="playCount" value="1" />';
        player += '</object>';

        holder.innerHTML = player;
    }

それから私はこれらのようないくつかのマークアップとインラインJSを書くことによってその機能を使いました:

    window.addEventListener('load', generateWindowsMediaPlayer('wmpHolder', 240, 320, 'http://mysite.com/path/video.ext'));

コードの下位互換性を高め、ブラウザ間で互換性を持たせるには、* window load event の代わりに jQuery.ready *を使用できます。

Windows 7/8でIE 9-10、Chrome 27、Firefox 21、Opera 12、Safari 5でコードをテストしました。


3


Elizabeth Castroのサイトで、FireFoxとIEの両方で実際に動作するものを見つけました(このサイトのリンクのおかげで) - ここで他のすべてのバージョンを試してみましたが、両方のブラウザで動作させることはできませんでした。


彼女のサイトをチェックしてください。http://www.alistapart.com/articles/byebyeembed/そして最初のオブジェクトタグにclassidがあるバージョン