0

ビデオ For Everyoneのバリアントを使用するビデオ プレーヤー アプリケーションがあります。HTML5タグで、インターネット エクスプローダーのフラッシュ フォールバック<video>のタグを囲みます。<object>これを静的に行うとすべてうまくいきますが、ビデオ要素がjavascriptを使用して構築されている場合、IE9はこれを好まないようです。

このような静的コードを使用すると動作します:

<video id="video" width="360" height="240>
<source type="video/ogg" src="content/mov1.ogv"></source>
<source type="video/mp4" src="content/mov1.mp4"></source>
<object data="player.swf" type="application/x-shockwave-flash" height="384" width="512">
<param name="movie" value="player.swf" >
<param value="autostart=true&amp;file=/mov1.mp4" name="flashvars">
</object>
</video>

しかし、JavaScript関数を使用して以下のようにビデオプレーヤーを構築すると、そうではありません。

function makeV4EPlayer(mp4URL, ogvURL, movieWidth, movieHeight, displayname){
    //create the video element and set its attributes
    var videoObject= document.createElement('video');
    videoObject.setAttribute("id", "video");        
    videoObject.setAttribute("width", movieWidth);
    videoObject.setAttribute("height", movieHeight);

    //add mp4 source
    var mp4Src=document.createElement('source');
    mp4Src.setAttribute("src", mp4URL);
    mp4Src.setAttribute("type","video/mp4");
    videoObject.appendChild(mp4Src);

    //add ogv source
    var oggSrc=document.createElement('source');
    oggSrc.setAttribute("src", ogvURL);
    oggSrc.setAttribute("type","video/ogg");
    videoObject.appendChild(oggSrc);

    //add object with flash player      
    var flashObject=document.createElement('object');
    flashObject.setAttribute("width", movieWidth);
    flashObject.setAttribute("height", movieHeight);
    flashObject.setAttribute("type", "application/x-shockwave-flash");
    flashObject.setAttribute("data","swf/player.swf");
    var params1 = document.createElement('param');
    params1.setAttribute("name", "movie");
    params1.setAttribute("value","swf/player.swf");
    var params2=document.createElement('param');
    params2.setAttribute("name","flashvars");
    params2.setAttribute("value",'autostart=true' + '&file=/' + mp4URL);
    flashObject.appendChild(params1);
    flashObject.appendChild(params2);
    videoObject.appendChild(flashObject);

    return videoObject;
}

Javascript は<video>タグを問題なく作成し、すべてのものを入力しますが、IE がそれを再生しないだけです。もちろん、宇宙の他のすべてのブラウザで問題なく動作します。

IE9 開発者ツールを使用してページを検査すると、静的バージョンではビデオ タグとオブジェクト タグが兄弟として認識されることに注意してください。つまり、オブジェクトはビデオ タグ内にありませんが、JavaScript バージョンではオブジェクトがvideo タグ内にネストされています。それが問題の核心だと私は信じています。

関連性はないと思いますが、フォールバック フラッシュ プレーヤーとして JW Player を使用しています。

4

1 に答える 1

0

IEはogg形式をサポートしていません（ブラウザの互換性ページも参照してください）。他のブラウザはサポートしています。

MP4のURLが正しくないか、ファイルが壊れている可能性がありますか？

===更新===

次の行imagesrcでは、以前に定義されていないものを使用しています。

params2.setAttribute("value",'autostart=true' + imagesrc + '&file=/' + mp4URL);

前に初期化する必要があります。

=== UDPATE ===

objectタグをタグに含めるべきではない場合は、 video1つの要素しか返すことができないため、変更を加える必要があります。たとえば、両方をラッパー要素に入れます。

function makeV4EPlayer(mp4URL, ogvURL, movieWidth, movieHeight, displayname){
    // create a wrapper
    var videoWrapper = document.createElement('div');
    videoWrapper.style.width = movieWidth+'px';
    videoWrapper.style.height = movieHeight+'px';
    videoWrapper.style.padding = '0';
    videoWrapper.style.margin = '0';

    //create the video element and set its attributes
    var videoObject= document.createElement('video');
    videoObject.setAttribute("id", "video");        
    videoObject.setAttribute("width", movieWidth);
    videoObject.setAttribute("height", movieHeight);

    //add mp4 source
    var mp4Src=document.createElement('source');
    mp4Src.setAttribute("src", mp4URL);
    mp4Src.setAttribute("type","video/mp4");
    videoObject.appendChild(mp4Src);

    //add ogv source
    var oggSrc=document.createElement('source');
    oggSrc.setAttribute("src", ogvURL);
    oggSrc.setAttribute("type","video/ogg");
    videoObject.appendChild(oggSrc);

    // add video to wrapper
    videoWrapper.appendChild(videoObject);

    //add object with flash player      
    var flashObject=document.createElement('object');
    flashObject.setAttribute("width", movieWidth);
    flashObject.setAttribute("height", movieHeight);
    flashObject.setAttribute("type", "application/x-shockwave-flash");
    flashObject.setAttribute("data","swf/player.swf");
    var params1 = document.createElement('param');
    params1.setAttribute("name", "movie");
    params1.setAttribute("value","swf/player.swf");
    var params2=document.createElement('param');
    params2.setAttribute("name","flashvars");
    params2.setAttribute("value",'autostart=true' + '&file=/' + mp4URL);
    flashObject.appendChild(params1);
    flashObject.appendChild(params2);

    // add flash player to wrapper
    videoWrapper.appendChild(flashObject);

    return videoWrapper;
}

このjsfiddleでテストすることもできます（私はIE9を持っていないので、あなたのためにそれを行うことはできません）。

または、ビデオタグ用とオブジェクトタグ用の2つの関数を作成することもできます。

于 2012-07-30T07:14:39.740 に答える