1

HTMLページ内に簡単なビデオ要素を作成します。ここにコード：

<!DOCTYPE html>
<html lang="ar">
    <head>
    <meta charset="utf-8"/>
    <script src="js/jquery-1.8.3.min.js"></script>

        <style>
            body{
                background:gray; 
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            #vid_container {position:absolute;left:50%;top:50%;visibility:visible;text-align:center;z-index:501;}
            #vid_background {position:absolute;left:-350px;top:-270px;width:700px;height:540px;background:url(datas/vid_bg.png);z-index:501;}
            #vid_loader {position:absolute;left:-320px;top:-240px;text-align:center;z-index:502;}
            #vid_button {position:absolute;left:-346px;top:-266px;width:30px;height:30px;background:url(datas/vid_btn.png);z-index:503;cursor:pointer;}


        </style>
    </head>
    <body>

        <div id='vid_container'>

        <div id='vid_background'></div>

        <video id='vid_loader' width="640" height="480" preload controls>
            <source src="my_video.mp4" type="video/mp4">
        </video>

        <div id='vid_button'></div>

        </div>

    </body>
</html>

ローカル（私のコンピューター）のINTERNET EXPLORERでコードをテストすると、正常に動作し、ムービーが読み込まれます。しかし、FTPでホストし、インターネット経由でテストすると、ロードされません（他のすべてのブラウザーでロードされます）

あなたはあなた自身をテストすることができます:(他のブラウザでこのリンクを開いてください、それはうまくいきますが、すなわちそうではありません）

http://ajnadeen-me.com/eBook/vidbug/index.html

映画はMP4圧縮H.264です。

ありがとう 。

4

3 に答える 3

1

まず、HTML5タグ<video>がInternetExplorerでサポートされていることを確認する必要があります。Internet Explorer 9のみがネイティブにサポートしているので、こちらを参照してください。以前のバージョンでも機能させたい場合は、古いバージョンのInternetExplorerにHTML5タグのサポートを追加する必要があります。まだ行っていない場合は、html5shivを使用できます。headWebページのに次のコードを追加するだけです。

<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

videoこれで、タグを使用できます。最初にビデオhtml5タグを使用するソリューションを提供します。それが失敗した場合は、JavaScriptやブラウザースニッフィングを使用せずにフラッシュビデオプレーヤーを使用してビデオをロードします。それでも失敗した場合は、画像のプレースホルダー（ポスター）が表示され、Webサイトの訪問者にビデオのダウンロードを許可できます。最後の部分に興味がない場合は、コードから削除するだけです。mp4コードにあるように、ビデオをフォーマットだけでなく、oggとで作成することをお勧めしますwebm。

フォーマットの互換性：

  • Internet Explorer 9+はMp4をサポートしていますが、WebMとOggはサポートしていません。
  • Chrome 6+は、3つの形式すべてをサポートしています。
  • Firefox 3.6+はWebMとOggをサポートしていますが、Mp4はサポートしていません。
  • Safari 5+はMp4をサポートしていますが、WebMとOggはサポートしていません。
  • Opera 10.6+はWebMとOggをサポートしていますが、Mp4はサポートしていません。

そのため、3つの形式すべてを含める必要があります。

preloadInternet Explorerでサポートされていないため、この属性を削除しました。

HTMLコードは次のとおりです。

<video controls poster="poster.jpg" width="640" height="480">
    <source src="my_video.mp4" type="video/mp4" />
    <source src="my_video.webm" type="video/webm" />
    <source src="my_video.ogv" type="video/ogg" />
    <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="480">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowFullScreen" value="true" />
        <param name="wmode" value="transparent" />
        <param name="flashVars" value="config={'playlist':['poster.jpg',{'url':'my_video.mp4','autoPlay':false}]}" />
        <img alt="Video" src="poster.jpg" width="640" height="480" title="No video playback capabilities, please download the video below" />
    </object>
</video>
<p>
    <strong>Download video:</strong> <a href="my_video.mp4">MP4 format</a> | <a href="my_video.ogv">Ogg format</a> | <a href="my_video.webm">WebM format</a>
</p>

サーバーサポート：

サーバーでMIMEタイプが正しく設定されていない場合、ビデオを再生できない可能性があります。Apacheサーバーを使用する場合は、の構成ディレクティブに、/etc/apacheまたはを介してビデオファイルの拡張子を追加できます。AddTypehttpd.conf

Oggの場合：

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

WebMの場合：

AddType video/webm .webm

Mp4の場合：

AddType video/mp4 .mp4

InternetExplorer9を使用してw3schoolsの例を確認しました。InternetExplorer7またはInternetExplorer8に切り替えると、サポートされません。（以前に話したHTML5ビデオタグの互換性の問題のため）。ここでも、htmlshivを使用してそれを解決できます。

Internet Explorer 9を使用している場合でも、ページがQuirksモード（互換モード、つまりie7またはie8）で表示される可能性があります。<!DOCTYPE html>xmlプロローグなしで使用することを確認することでそれを回避できます。

さらに、これを追加することで、ブラウザのエミュレーションを最新バージョンのInternetExplorerに強制することができます。

<meta http-equiv="X-UA-Compatible" content="IE=edge" >

headHTMLページの。

于 2013-01-07T08:53:43.090 に答える
1

サーバーにMP4ビデオ用に設定された正しいMIMEタイプがない可能性があります。HTML5マルチメディアトラブルシューティングのポイント2を参照してください。

于 2013-01-07T09:09:38.660 に答える
1

Web サーバーが不適切な MIME タイプでビデオを配信しています。現在の MIME タイプはvideo/mpeg(IE9 では動作しません) です。MP4 ビデオの MIME Con​​tent-Type は、RFC 4337で定義されています。この ISO ルールを指す特定の H.264 エンコーディングを参照する段落も参照してくださいvideo/mp4。動画配信コンテンツ タイプの詳細については、こちらをご覧ください。

于 2013-01-07T13:45:16.413 に答える