4

こんにちは、できれば助けてほしいと思っていました。Chrome で表示すると、動作がおかしい HTML5 ビデオがあります。

ユーザーが初めて再生ボタンを押すと、ビデオが再生されます。一時停止をクリックすると、ビデオが一時停止します。しかし、再生ボタンがまったく機能せず、ビデオを再生する唯一の方法は、ビデオ画面をクリックすることです。

なぜこれが起こっているのか、どうすればこの問題を解決できるのかについてのアイデアはありますか?

私が使用しているコードは次のとおりです。

<video width="560" height="320" preload controls>
<source src="videos/Testimonial2.mp4" type="video/mp4" />
<source src="videos/Testimonial2.ogv" type="video/ogg" />
<source src="videos/Testimonial2.webm" "type=video/webm" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="560" height="320">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#FFFFFF" />
<param name="quality" value="high" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<param name="flashvars" value="vdo=videos/Testimonial2.flv&amp;autoplay=false" />
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</video>

ありがとうございました ：）

4

2 に答える 2

4

今日、この同じ問題に遭遇しました。Chrome のみが問題を引き起こしていました。ビデオを再生してから、しばらくしたら一時停止します。ビデオを一時停止した後に再開しようとすると、一瞬再生されてからフリーズします。

私が見つけた唯一の解決策は、preload="none" を設定することです。なぜこれが機能するのかはわかりませんが、私にとってはうまくいきました。問題は、プレビュー イメージが表示されなくなったため、Internet Explorer で使用する回避策を使用していることです。現在、すべてのブラウザでこの回避策を実行しています。下記参照。

<div style="display:inline-block; margin-top:-14px; padding:5px;">
  <video id="video14" width="310" height="200" style="background:#000000 url('images/play.png') no-repeat;" preload="none" controls>
    <source src="videos/video1.mp4" type="video/mp4">
    <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="310" height="200">
      <param name="src" value="videos/video1.mp4">
      <param name="type" value="video/mp4">
      <param name="controller" value="true">
      <param name="autoplay" value="false">
      <embed src="videos/video1.mp4" type="video/mp4" width="310" height="200" controller="true" autoplay="false"></embed>
    </object>
  </video>
  <script>
    document.getElementById('video14').onclick = function () {
      document.getElementById('video14').play();
      document.getElementById('video14').onclick = '';
      document.getElementById('video14').style.background = '';
    };
  </script>
</div>

上記では、動画に再生ボタンの ID と背景画像を指定しています。次に、クリックしたときにビデオを再生するように JavaScript を設定し、初めてクリックした後に onclick 関数と背景を削除します。この背景画像は、選択した任意の画像に設定できます。再生ボタンを使ってシンプルにしました。背景画像を設定する代わりに poster 属性を使用することもできます。ポスターを使用する場合、背景を削除するための追加の JavaScript は必要ありません。

お役に立てれば。

-ジョン

編集: poster 属性を使用してみましたが、IE9 では機能しなかったため、今のところ背景に固執します。また、ポスターでvideo.jsを使用してみましたが、IE9も取り込めませんでした。IE9 はポスターが嫌いなだけだと思います。

于 2013-09-30T18:06:36.013 に答える