すべてのブラウザに Windows Media Player を埋め込む
https://stackoverflow.com/questions/164
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
私たちが使用しているのは WMV 内部サイト上のビデオを Web サイトに埋め込んでいます。これは Internet Explorer では非常にうまく機能しますが、Firefox ではうまく機能しません。Firefox で動作させる方法を見つけましたが、Internet Explorer では動作しなくなります。
特に、すべてのクライアントが Windows Media Player がインストールされた Windows XP を実行しているかどうかわからないため、現時点では Silverlight を使用するつもりはありません。
WMP を Internet Explorer と Firefox の両方に埋め込む何らかのユニバーサル コードはあるのでしょうか、それともユーザー エージェント検出を実装してブラウザごとに異なる HTML を配信する必要があるのでしょうか?
解決
以下は Firefox と Internet Explorer で機能します。
<object id="mediaplayer" classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#version=5,1,52,701" standby="loading microsoft windows media player components..." type="application/x-oleobject" width="320" height="310">
<param name="filename" value="./test.wmv">
<param name="animationatstart" value="true">
<param name="transparentatstart" value="true">
<param name="autostart" value="true">
<param name="showcontrols" value="true">
<param name="ShowStatusBar" value="true">
<param name="windowlessvideo" value="true">
<embed src="./test.wmv" autostart="true" showcontrols="true" showstatusbar="1" bgcolor="white" width="320" height="310">
</object>
他のヒント
を提案してもいいでしょうか jQueryメディアプラグイン?WMV だけでなく、あらゆる種類のビデオに埋め込みコードを提供し、ブラウザ検出を行うことで、面倒な switch/case ステートメントをすべてテンプレートから排除します。
以下を使用してください。Firefox と Internet Explorer で動作します。
<object id="MediaPlayer1" width="690" height="500" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
standby="Loading Microsoft® Windows® Media Player components..." type="application/x-oleobject"
>
<param name="FileName" value='<%= GetSource() %>' />
<param name="AutoStart" value="True" />
<param name="DefaultFrame" value="mainFrame" />
<param name="ShowStatusBar" value="0" />
<param name="ShowPositionControls" value="0" />
<param name="showcontrols" value="0" />
<param name="ShowAudioControls" value="0" />
<param name="ShowTracker" value="0" />
<param name="EnablePositionControls" value="0" />
<!-- BEGIN PLUG-IN HTML FOR FIREFOX-->
<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
src='<%= GetSource() %>' align="middle" width="600" height="500" defaultframe="rightFrame"
id="MediaPlayer2" />
そして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(error) {
alert(error)
}
}
エリザベス・カストロは、この問題に関して興味深い記事を書いています。 バイバイ 埋め込む. 。彼女がどのようにこの問題に取り組み、QuickTime コンテンツを処理したかについては一読の価値があります。
条件付きコメントを使用すると、IE と Firefox に異なる動作をさせることができます。
<![if !IE]>
<p> Firefox only code</p>
<![endif]>
<!--[if IE]>
<p>Internet Explorer only code</p>
<![endif]-->
ブラウザ自体は、読み取ることを意図していないコードを無視します。
Web 上にビデオを展開する最良の方法は Flash を使用することです。Web ページにきれいに埋め込むのがはるかに簡単で、多かれ少なかれどのようなブラウザとプラットフォームの組み合わせでも再生できます。Windows Media Player を使用する唯一の理由は、コンテンツをストリーミングしていて、非常に強力なデジタル著作権管理が必要な場合ですが、その場合でも、プロバイダーはこれらの目的でも Flash を使用し始めています。優れた例については、BBC の iPlayer を参照してください。
社内で使用する場合でも Flash に切り替えることをお勧めします。将来誰がそれにアクセスする必要があるかはわかりません。これにより、将来の互換性が可能な限り最高になります。
編集 - 2013 年 3 月 20 日。興味深いのは、こうした古い質問が時々浮上することです。今日の世界はどれほど変わっており、すべてがどれほど時代遅れに感じられるか。現在、Flash のみのルートをお勧めすることは決してありません。最近のベスト プラクティスは、HTML 5 を使用して H264 でエンコードされたビデオを埋め込み、ここで説明するように Flash フォールバックを使用することでしょう。 http://diveintohtml5.info/video.html
Flash ビデオのエンコードは、ffmpeg を使用すると非常に簡単です。1 つのコマンドを使用してほぼあらゆるビデオ形式から変換できます。ffmpeg は残りの部分を理解するのに十分賢く、マシン上のすべてのプロセッサを使用します。呼び出すのは簡単です。
ffmpeg -i input.avi output.flv
ffmpeg は必要なビットレートを推測しますが、ビットレートを指定したい場合は -b オプションを使用できます。 -b 500000 たとえば500kbpsです。もちろんオプションはたくさんありますが、ほとんどいじらなくても良い結果が得られます。さらにオプションを探している場合は、ここから始めるのが良いでしょう。 ビデオオプション.
Flash ビデオを表示するために特別な Web サーバーは必要ありません。.flv ファイルを標準の Web サーバーにプッシュし、次のような優れた swf プレーヤーでそれらのファイルにリンクするだけで、うまくいきました。 フロープレイヤー.
すべてのユーザーが常に Windows [最新の最新バージョン] のみを使用すると確信できる場合は、WMV で問題ありませんが、その場合でも、Web には Flash の方が適していることがよくあります。プレーヤーは非常にスキン変更可能であり、JavaScript で制御できます。
について良い記事を見つけました Firefox で WMP を使用する MSDN で。
MSDN の記事に基づいていくつかの試行錯誤を行った結果、条件付きコメントやネストされた「EMBED/OBJECT」タグを使用するよりも JavaScript を使用する方が優れていることがわかりました。
指定された引数に基づいて WMP オブジェクトを生成する JS 関数を作成しました。
<script type="text/javascript">
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;
}
</script>
次に、次のようなマークアップとインライン JS を記述して、その関数を使用しました。
<div id='wmpHolder'></div>
<script type="text/javascript">
window.addEventListener('load', generateWindowsMediaPlayer('wmpHolder', 240, 320, 'http://mysite.com/path/video.ext'));
</script>
使用できます jQuery.ready の代わりに ウィンドウロードイベント コードの下位互換性とブラウザ間の互換性を高めるためです。
Windows 7/8 上の IE 9 ～ 10、Chrome 27、Firefox 21、Opera 12、Safari 5 でコードをテストしました。
私は、Elizabeth Castro のサイトで FireFox と IE の両方で実際に動作するものを見つけました (このサイトのリンクのおかげです) - ここで他のバージョンをすべて試しましたが、両方のブラウザで動作させることができませんでした
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
id="player" width="320" height="260">
<param name="url"
value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" />
<param name="src"
value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" />
<param name="showcontrols" value="true" />
<param name="autostart" value="true" />
<!--[if !IE]>-->
<object type="video/x-ms-wmv"
data="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv"
width="320" height="260">
<param name="src"
value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" />
<param name="autostart" value="true" />
<param name="controller" value="true" />
</object>
<!--<![endif]-->
</object>
彼女のサイトをチェックしてください: http://www.alistapart.com/articles/byebyeembed/ および最初のオブジェクトタグに classid が含まれるバージョン
