鍍金池/ 問答/HTML5  HTML/ 在蘋果safari瀏覽器上video標(biāo)簽無法正常播放視頻

在蘋果safari瀏覽器上video標(biāo)簽無法正常播放視頻

為什么在蘋果safari瀏覽器上video標(biāo)簽無法正常播放視頻?

<video autoplay loop>
    <source src="/static/xxx/video/xxx.mp4" type="video/mp4">
    <source src="/static/xxx/video/xxx.webm" type="video/webm">
</video>

視頻是.mp4格式,h264編碼的。
safari瀏覽器到底支持什么格式的視頻啊,
(1.只放第一個source標(biāo)簽,也無法正常播放)
(2.聽說safari阻止自動播放,去掉autoplay也不行)
(3.控制臺沒有報任何錯誤)

————————————————————————————————————————

時間距離我提出這個問題已經(jīng)過去了好幾個月......
終于解決了問題:
在tomcat的web.xml配置文件中,增加以下配置:

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.mp4</url-pattern>
</servlet-mapping>

至于為什么要這么做,詳情請查看:Safari瀏覽器無法播放視頻資源(Java后臺SSM架構(gòu))的解決方法

————————————————————————————————————————

第三次更新...
按我的理解,video標(biāo)簽是一個視頻功能,是html5標(biāo)準(zhǔn)。瀏覽器在實現(xiàn)它的時候,可能會產(chǎn)生一些差異。video標(biāo)簽的路徑就是瀏覽器輔助發(fā)起視頻請求的地址,不同的是,safari會首先去請求1字節(jié)的數(shù)據(jù)來確認(rèn)這個視頻是否可以播放,而其他瀏覽器不會。為什么這1字節(jié)的請求會導(dǎo)致safari無法播放視頻呢?因為這一字節(jié)的請求是攜帶range請求頭的,它表示請求從某某字節(jié)到某某字節(jié)(x-x 如 0-1)的數(shù)據(jù),如果服務(wù)器能夠正常響應(yīng)的話,返回的狀態(tài)碼應(yīng)該是206 Partial Content,否則的話會返回整個視頻流資源及狀態(tài)碼200 OK,這就導(dǎo)致safari沒能夠拿到想要的數(shù)據(jù),于是判定該視頻無法播放。range請求頭和206狀態(tài)碼,無疑是為斷點續(xù)傳預(yù)備的,說白了,如果你的后臺視頻服務(wù)支持?jǐn)帱c續(xù)傳(在視頻服務(wù)中,快進(jìn),快退,拖動進(jìn)度條,也是請求x-x字節(jié)的數(shù)據(jù),應(yīng)也是斷點續(xù)傳),視頻就可以在safari上播放,否則就不行。當(dāng)然,最最基礎(chǔ)的,首先是瀏覽器支持video標(biāo)簽,并且支持對應(yīng)的視頻格式。

回答
編輯回答
傻叼

@眼星 你這個解決了嗎 我的也是video無法在Safari瀏覽器播放 我的只是PC端

2018年7月31日 20:47
編輯回答
詆毀你

我也是同樣的問題。就mac和ios上safari瀏覽器無法播放

2018年1月19日 13:53
編輯回答
別逞強(qiáng)

看看vedio的請求頭和響應(yīng)頭
請求頭里面有沒有Range字段
響應(yīng)頭里面有沒有Content-Range字段

2017年8月1日 11:19
編輯回答
瘋子范

謝邀!
第一:確認(rèn)下safari的版本。video兼容版本:https://caniuse.com/#search=v... 如果不支持用html5media.js進(jìn)行轉(zhuǎn)化,或者把video改成object標(biāo)簽。
第二:如果想要在iOS上播放視頻,那么必須在http協(xié)議中應(yīng)用rang請求頭。range是播放器要求的區(qū)間也就是客戶端發(fā)送請求的時候http會帶有這個標(biāo)記,這個區(qū)間的值在http.headers.range中獲取,一般是bytes=0-1。如果沒有讓服務(wù)端伙伴幫忙處理。
第三:Safari出于用戶體驗考濾是禁止自動播放的。
最后:查查是不是手機(jī)設(shè)置禁止播放視頻了。

2017年5月22日 20:12
編輯回答
近義詞

這樣,dom加載完之后,動態(tài)加上src;

document.querySelector('vedio').src="xxxx";
2017年10月23日 15:59
編輯回答
厭惡我
<video src="/static/rogrand/video/banner_video.mp4" controls></video>

這樣試一下

2017年2月10日 09:05