web-dev-qa-db-ja.com

chromeのhtml5ビデオの問題

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">

chromeおよびFFで正常に動作します。しかし、mp4を追加するとすぐに：

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

Chromeには黒い画面と「ビデオを待っています」というテキストが表示されますが、サファリとFFは期待どおりに表示されます。

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

html5google-chromehtml5-video
8
Ramtin Gh

これは私が見つけた解決策です

まず、動画を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" />'));
}
6
Ramtin Gh

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

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

H.264 Normalエンコーダーで変換すべきだったのに、MP4 VIDEOエンコーダーで元のmp4を変換したことが判明しました。

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

<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 Everybody」メソッドを変更したものです。詳細は http://css-tricks.com/snippets/html/video-for-everybody-html5-video-with-flash-fallback/ にあります。

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

4
Carme

HTML5 Doctypeがあることを確認してください。

<!DOCTYPE html>

これで問題は解決しました。

3
Miki

2つを交換してみて、mp4を最初に置き、webmコードを次に置き、そして何が起こるかを見てください。私はこれを持っています

<div id="ModelVideo">
  <video max-width="100%" controls autoplay muted>
    <source src="movie1.mp4" type="video/mp4">
    <source src="movie1.webm" type="video/webm" controls>
    Your browser does not support the video tag.
  </video>
</div>

私のmp4であるchromeでは私のものが正常に動作していますが、他のブラウザではテストできません。ただし、DreamweaverはSafariでも同様にテストでき、両方とも正常に動作するようです。

（笑わないで、まだ website に取り組んでいます）

おそらく、ボリュームをうまく制御する方法を教えてください。そのボリュームに問題があるようです。

2
Bat Sheva Sida

Chromeの問題は、一度ビデオをダウンロードすると再生されないことです。

あなたは小さなjavascriptスニペットを追加することでそれを解決できます：

this.interval = setInterval(function(){
  this.countForVideo = document.getElementById('vid').readyState;
  if(this.countForVideo == 4){
    document.getElementById('vid').play();
    clearInterval(this.interval);
  }
},2000);

これにより、ビデオが2秒ごとにダウンロードされるかどうかが確認されます。ビデオがダウンロードされると、ビデオが再生され、インターバルが停止します。

0
Pavan Gadagi