HTML 5ビデオタグコントロールがSafariとFirefoxで動作しない

Question

このコードをSafariとFirefoxで機能するコントロールにしようとしています。コントロールは反応しないだけです。コードはChromeで正常に動作します。

<span class="device image fit"><section id="video"> 
    <video src="images/Compassionate%20Release%20Healthcare%20Network.mp4" width="100%" controls="true">  
    </video> 
</span> 

おかげで、

Answer 1

問題はあなたがすべてのブラウザでサポートされていない形式のみを、.MP4使用しようとしているです。

モバイルデバイスやその他のブラウザでは、別のムービー形式を用意してフォールバックを作成する必要があります。

このようなあなたの <video>要素を書いてみます。これは、ほとんどのデスクトップやモバイルブラウザでサポートされます

<video controls> 
    <source src="somevideo.webm" type="video/webm"> 
    <source src="somevideo.mov" type="video/mov"> 
    <source src="somevideo.mp4" type="video/mp4"> 
    I'm sorry; your browser doesn't support HTML5 video 
</video> 

。

• .mov - Safari、iOS Safariでサポートされています。
• .mp4 - Chromeでサポート、 Android ChromeとAndroid Browser、IE。
• .webm - Firefox、Chrome、IEでサポートされています。

さらに詳しくは、thisの記事をご覧ください。

Answer 2

コードにsectionタグのクローズタグがありません。これにより、一部のブラウザではパーサが捨てられることがあります。

単純に1を追加したり、既存の開始タグを削除する：

<span class="device image fit"> 
    <section id="video"> 
    <video src="..." width="100%" controls="true">  
    </video> 
    </section> <!-- add this --> 
</span>