HTML5 視頻背景不在 iPhone 上播放 Safari

Question

我有網站原始頁面構建器（Wordpress）的視頻背景插件，並且我上傳了背景視頻（MP4 和 WEBM 格式）。 文件大小分別約為 35mb 和 17mb。

我已經在幾部運行最新 iOS 和 safari 的 iPhone 上進行了測試，視頻沒有像它應該的那樣自動播放（只顯示后備圖像）。

視頻代碼：

<video id="so_bgvideo_5df3a8b601042" 
class="so_video_bg jquery-background-video is-playing is-visible" 
loop="" autoplay="" playsinline="" muted="" data-bgvideo="" 
poster="https://mywebsite.com/fallback-image.jpg" 
data-bgvideo-fade-in="500" data-bgvideo-pause-after="120" 
data-bgvideo-show-pause-play="true" 
data-bgvideo-pause-play-x-pos="right"
data-bgvideo-pause-play-y-pos="top" 
style="min-width: auto; min-height:auto; width: 100%; height: auto;
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
transition-duration: 500ms;">
<source src="https://mywebsite.com/video.mp4" type="video/mp4">
<source src="https://mywebsite.com/video.webm" type="video/webm">
</video>

據我所知，視頻包含 Safari 所需的屬性（並且在 Safari 桌面上播放良好）。

任何人都可以建議修復以使其在 Safari 移動設備上運行嗎？

Answer 1

我有用於網站原始頁面構建器（Wordpress）的視頻背景插件，並且我已經上傳了背景視頻（MP4和WEBM格式）。 文件大小分別約為35mb和17mb。

我已經在運行了最新版本的iOS的safari的iPhone上進行了測試，並且視頻沒有按預期自動播放（僅顯示后備圖片）。

影片代碼：

<video id="so_bgvideo_5df3a8b601042" 
class="so_video_bg jquery-background-video is-playing is-visible" 
loop="" autoplay="" playsinline="" muted="" data-bgvideo="" 
poster="https://mywebsite.com/fallback-image.jpg" 
data-bgvideo-fade-in="500" data-bgvideo-pause-after="120" 
data-bgvideo-show-pause-play="true" 
data-bgvideo-pause-play-x-pos="right"
data-bgvideo-pause-play-y-pos="top" 
style="min-width: auto; min-height:auto; width: 100%; height: auto;
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
transition-duration: 500ms;">
<source src="https://mywebsite.com/video.mp4" type="video/mp4">
<source src="https://mywebsite.com/video.webm" type="video/webm">
</video>

據我所知，視頻包含Safari所需的屬性（並且在Safari桌面上可以正常播放）。

任何人都可以提出修復建議，以使其在Safari移動版上正常工作嗎？

Answer 2

我有用於網站原始頁面構建器（Wordpress）的視頻背景插件，並且我已經上傳了背景視頻（MP4和WEBM格式）。 文件大小分別約為35mb和17mb。

我已經在運行了最新版本的iOS的safari的iPhone上進行了測試，並且視頻沒有按預期自動播放（僅顯示后備圖片）。

影片代碼：

<video id="so_bgvideo_5df3a8b601042" 
class="so_video_bg jquery-background-video is-playing is-visible" 
loop="" autoplay="" playsinline="" muted="" data-bgvideo="" 
poster="https://mywebsite.com/fallback-image.jpg" 
data-bgvideo-fade-in="500" data-bgvideo-pause-after="120" 
data-bgvideo-show-pause-play="true" 
data-bgvideo-pause-play-x-pos="right"
data-bgvideo-pause-play-y-pos="top" 
style="min-width: auto; min-height:auto; width: 100%; height: auto;
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
transition-duration: 500ms;">
<source src="https://mywebsite.com/video.mp4" type="video/mp4">
<source src="https://mywebsite.com/video.webm" type="video/webm">
</video>

據我所知，視頻包含Safari所需的屬性（並且在Safari桌面上可以正常播放）。

任何人都可以提出修復建議，以使其在Safari移動版上正常工作嗎？

Answer 3

我有用於網站原始頁面構建器（Wordpress）的視頻背景插件，並且我已經上傳了背景視頻（MP4和WEBM格式）。 文件大小分別約為35mb和17mb。

我已經在運行了最新版本的iOS的safari的iPhone上進行了測試，並且視頻沒有按預期自動播放（僅顯示后備圖片）。

影片代碼：

<video id="so_bgvideo_5df3a8b601042" 
class="so_video_bg jquery-background-video is-playing is-visible" 
loop="" autoplay="" playsinline="" muted="" data-bgvideo="" 
poster="https://mywebsite.com/fallback-image.jpg" 
data-bgvideo-fade-in="500" data-bgvideo-pause-after="120" 
data-bgvideo-show-pause-play="true" 
data-bgvideo-pause-play-x-pos="right"
data-bgvideo-pause-play-y-pos="top" 
style="min-width: auto; min-height:auto; width: 100%; height: auto;
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
transition-duration: 500ms;">
<source src="https://mywebsite.com/video.mp4" type="video/mp4">
<source src="https://mywebsite.com/video.webm" type="video/webm">
</video>

據我所知，視頻包含Safari所需的屬性（並且在Safari桌面上可以正常播放）。

任何人都可以提出修復建議，以使其在Safari移動版上正常工作嗎？

Answer 4

我有用於網站原始頁面構建器（Wordpress）的視頻背景插件，並且我已經上傳了背景視頻（MP4和WEBM格式）。 文件大小分別約為35mb和17mb。

我已經在運行了最新版本的iOS的safari的iPhone上進行了測試，並且視頻沒有按預期自動播放（僅顯示后備圖片）。

影片代碼：

<video id="so_bgvideo_5df3a8b601042" 
class="so_video_bg jquery-background-video is-playing is-visible" 
loop="" autoplay="" playsinline="" muted="" data-bgvideo="" 
poster="https://mywebsite.com/fallback-image.jpg" 
data-bgvideo-fade-in="500" data-bgvideo-pause-after="120" 
data-bgvideo-show-pause-play="true" 
data-bgvideo-pause-play-x-pos="right"
data-bgvideo-pause-play-y-pos="top" 
style="min-width: auto; min-height:auto; width: 100%; height: auto;
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
transition-duration: 500ms;">
<source src="https://mywebsite.com/video.mp4" type="video/mp4">
<source src="https://mywebsite.com/video.webm" type="video/webm">
</video>

據我所知，視頻包含Safari所需的屬性（並且在Safari桌面上可以正常播放）。

任何人都可以提出修復建議，以使其在Safari移動版上正常工作嗎？

Answer 5

我有用於網站原始頁面構建器（Wordpress）的視頻背景插件，並且我已經上傳了背景視頻（MP4和WEBM格式）。 文件大小分別約為35mb和17mb。

我已經在運行了最新版本的iOS的safari的iPhone上進行了測試，並且視頻沒有按預期自動播放（僅顯示后備圖片）。

影片代碼：

<video id="so_bgvideo_5df3a8b601042" 
class="so_video_bg jquery-background-video is-playing is-visible" 
loop="" autoplay="" playsinline="" muted="" data-bgvideo="" 
poster="https://mywebsite.com/fallback-image.jpg" 
data-bgvideo-fade-in="500" data-bgvideo-pause-after="120" 
data-bgvideo-show-pause-play="true" 
data-bgvideo-pause-play-x-pos="right"
data-bgvideo-pause-play-y-pos="top" 
style="min-width: auto; min-height:auto; width: 100%; height: auto;
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
transition-duration: 500ms;">
<source src="https://mywebsite.com/video.mp4" type="video/mp4">
<source src="https://mywebsite.com/video.webm" type="video/webm">
</video>

據我所知，視頻包含Safari所需的屬性（並且在Safari桌面上可以正常播放）。

任何人都可以提出修復建議，以使其在Safari移動版上正常工作嗎？

Answer 6

我有用於網站原始頁面構建器（Wordpress）的視頻背景插件，並且我已經上傳了背景視頻（MP4和WEBM格式）。 文件大小分別約為35mb和17mb。

我已經在運行了最新版本的iOS的safari的iPhone上進行了測試，並且視頻沒有按預期自動播放（僅顯示后備圖片）。

影片代碼：

<video id="so_bgvideo_5df3a8b601042" 
class="so_video_bg jquery-background-video is-playing is-visible" 
loop="" autoplay="" playsinline="" muted="" data-bgvideo="" 
poster="https://mywebsite.com/fallback-image.jpg" 
data-bgvideo-fade-in="500" data-bgvideo-pause-after="120" 
data-bgvideo-show-pause-play="true" 
data-bgvideo-pause-play-x-pos="right"
data-bgvideo-pause-play-y-pos="top" 
style="min-width: auto; min-height:auto; width: 100%; height: auto;
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
transition-duration: 500ms;">
<source src="https://mywebsite.com/video.mp4" type="video/mp4">
<source src="https://mywebsite.com/video.webm" type="video/webm">
</video>

據我所知，視頻包含Safari所需的屬性（並且在Safari桌面上可以正常播放）。

任何人都可以提出修復建議，以使其在Safari移動版上正常工作嗎？

Answer 7

我有一個完整的代碼在這里工作，只需復制和編輯:)))

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>page_trouble</title>
    <meta charset="utf-8" />
    <style type="text/css">
    
  * {
 margin:0;
 padding:0;
 }
 
  
 video#bgvid {

  min-width: auto; min-height: 150vh;
  width: auto; height: auto; z-index: -100;
  background-size: cover;
}
  
  
</style>
    
    
</head>
<body style="background-color:black;">


    <video autoplay loop muted playsinline id="bgvid" >
<source src="fleur_trouble.mp4" type="video/mp4""
<source src="fleur_trouble.webpm" type="video/webpm""


</body>

</html>