Html5ビデオの問題

Question

私のプレゼンテーションビデオでhtmlに問題が発生しました：

ビデオは完全にロードされるまで麻痺し続け、再生を開始します。

一部のブラウザでは動作しますが、他のブラウザでは動作しません。誰かが私にそれを解決する助けてもいいですか？

HTML

<div class="videoContainer"> 
<video autoplay loop preload='auto'> 
<source src="video/Rio_Energy_Apresentacao.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
Video não suportado. 
</video> 
</div> 

CSS

.videoContainer 
{ 
    position:absolute; 
    height:100%; 
    width:100%; 
    overflow: hidden; 
} 

.videoContainer video 
{ 
    min-width: 100%; 
    min-height: 100%; 
} 

ライブサイト：WEBM、MP4、およびOGG：HTML5ビデオにhttp://ec2-54-71-170-71.us-west-2.compute.amazonaws.com/

Answer 1

、次の3つのビデオのフォーマットを作成することになるでしょう。ほとんどのブラウザではMP4が使用されますが、他のブラウザでは他の形式のいずれかが必要になります（これは一部のユーザーにとってはうまくいかない理由を説明します）。

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

これらの形式の順序は重要であることにも注意してください。常にリストの中で最初にwebm形式を宣言します（主にChromeの問題）。

最後に、ビデオのフォーマットに使用されているコーデックは、ブラウザの互換性の役割を果たします。私は正常に私の変換を行うにはMiro Video Converterアプリを使用して、それは正しいコーデックを利用できるようだ。

Answer 2

Media formatsを参照して、どのブラウザがメディアフォーマットをサポートしているかを理解してください。
複数のソースファイルを指定できます。参照HTML5Rocks
source要素を使用すると、ユーザーのブラウザがそのいずれかをサポートしていない場合にフォールバックとして複数の形式を指定できます。
例：

<video controls> 
    <source src="devstories.webm" type='video/webm;codecs="vp8, vorbis"'/> 
    <source src="devstories.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/> 
</video>