2017-02-23 65 views
-1

試圖讓此代碼在Safari和Firefox中運行控件。控件顯示不響應。代碼在Chrome中正常工作。HTML 5視頻標籤控件在Safari和Firefox中不起作用

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

感謝,

+0

請分享您的代碼/ HTML。 –

+0

請編輯你的問題,並在那裏添加代碼,而不是在評論中。 –

+0

你在safari/firefox中看到什麼?

回答

0

問題是你要使用的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瀏覽器,IE。
  • .webm - 支持Firefox,Chrome和IE。

要進一步閱讀,請查看this文章。

+2

在Firefox(Win7 +)中也支持mp4 – K3N

2

該代碼缺少section標記的關閉標記。這可能會在某些瀏覽器中拋棄解析器。

只需添加一個或刪除現有的開放標籤:

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

他寫道他可以看到視頻元素,所以這不是問題 – 2017-02-23 05:26:04

+0

我認爲你應該刪除這個答案並且將其添加爲問題的評論 – 2017-02-23 05:26:47

+0

@JamesPage我已經評論過它,但我也知道一些瀏覽器觸發器,當缺少標籤時,比如OP所描述的問題的響應性。如果是這樣的話,問題不需要更詳細的回答 – K3N

相關問題