web-dev-qa-db-ja.com

HTML5 Video BackgroundがiPhoneでSafariを再生しない

[〜#〜]更新[〜#〜]

問題が解決され、プラグインに追加されたjquery-background-video.jsファイルの更新バージョン。以下の私の回答の詳細または参照[〜#〜] update [〜#〜]

最初の投稿で述べたように、私はvideo background for site origins plugin for Wordpress

プラグインは最近更新されていませんが、GitHubで更新が利用可能になりました: https://github.com/BGStock/jquery-background-video/blob/master/jquery.background-video。 js

この新しいファイルを追加するか、古いファイルを上書きすると、iOSでの問題が解決しました。これがこの特定のプラグインを使用している他の人を助けることを願っています。

私はサイトOrigin Page Builder(Wordpress)用のビデオ背景プラグインを持っており、背景ビデオ(MP4およびWEBM形式)をアップロードしました。ファイルサイズはそれぞれ約35MBと17MBです。

サファリを搭載した最新のiOSを実行しているいくつかの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モバイルで動作するように修正をアドバイスできますか?

4
YorkieMagento

私が得ることができる最高の修正は、直後にこのコードを追加することでした

<script>
    document.getElementById('so_bgvideo_5df3a8b601042').play();
</script>
0
Valery Chas