8

Web ページで html5 ビデオを使用したいのですが、コードは次のとおりです。

<video id="vid" width="100%" autoplay loop>
  <source src="video/video.webm" type="video/webm">
  <source src="video/video.mp4" type="video/mp4">

Your browser does not support the video tag.
</video>

問題は、webm をビデオ ソースとして使用する場合:

<source src="video/video.webm" type="video/webm">

クロムとFFで正常に動作します。しかし、 mp4 を追加するとすぐに:

<source src="video/video.webm" type="video/webm">
      <source src="video/video.mp4" type="video/mp4">

Chrome では黒い画面と「ビデオ待ち」というテキストが表示されますが、Safari と FF では期待どおりに表示されます。

これらすべてのブラウザで再生できるようにするための提案をいただければ幸いです。ありがとう。

4

5 に答える 5

6

これは私が見つけた解決策であり、私の場合はうまくいきました。

まず、ビデオを HTML に埋め込みます。

<video id="videoId" width="100%" autoplay loop>
  <source src="main.webm" type="video/webm">
  <source src="main.mp4" type="video/mp4">

Your browser does not support the video tag.
</video>

次に、ブラウザがクロムかどうかを検出します。

var isChrome = !!window.chrome; 
var isIE = /*@cc_on!@*/false;

クロムの場合は、ビデオを webm バージョンに置き換えます。(自分で問題に直面していない人向け: mp4 と webm の両方を埋め込むと、chrome はそれらのいずれも再生しないため、「webm」のみを埋め込む必要があります)

if( isChrome ) {
$("#videoId").replaceWith($('<video id="videoId" width="100%" autoplay loop><source src="video.webm" type="video/webm"></video>'));
}

IE の場合: 私の場合、html5 ビデオを画像に置き換えました。

if( isIE ) {
$("#videoId").replaceWith($('<img id="videoId" src="img/video.jpg" />'));
}
于 2013-06-05T18:53:19.083 に答える
4

私は同じ問題を抱えていて、上記または他のスレッドで提案された解決策のいずれでも解決できませんでした (Google Chrome のバージョンを更新するか、Chrome のハードウェア アクセラレーションを無効にしても機能しませんでした)。

最後に、私にとってそれを解決したのは、ビデオファイルを別の mp4 形式に変換することでした。

元の mp4 を MP4 VIDEO エンコーダーで変換したことが判明しましたが、H.264 ノーマル エンコーダーで変換する必要がありました。

完全なコードは次のとおりです。

<video width="320" height="240" controls>
  <source src="video/Ruby.ogv" type="video/ogg" />
  <source src="video/Ruby.webm" type="video/webm" />
  <source src="video/Ruby-iPad.mp4" type="video/mp4" />
   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="320" height="240" id="Ruby" align="middle">
            <param name="movie" value="video/Ruby.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#ffffff" />
            <param name="play" value="false" />
            <param name="loop" value="false" />
            <param name="menu" value="true" />
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="video/Ruby.swf" width="330" height="295" id="Ruby">
                <param name="movie" value="video/Ruby.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#cccccc" />
                <param name="play" value="false" />
                <param name="loop" value="false" />
                <param name="menu" value="true" />
            <!--<![endif]-->
                <img src="video/Ruby.jpg" alt="No video playback capabilities" />
            <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
        </object>
</video>
<p class="caption"><em>Ruby</em> (fragment), ICF Hastings 2013.</p>

上記のコードは、"Video For Everyone" メソッドを適応させたものです。詳細については、http://css-tricks.com/snippets/html/video-for-everybody-html5-video-with-flash-fallback/を参照してください。

Wondershare Video Converter の古いバージョンを使用していますが、http: //video.online-convert.com/などの無料のオンライン サービスから同じ作業を行うことができます。

于 2013-12-10T14:42:16.840 に答える