Background video is not playing in safari browser on mobile and desktop

问题

I have converted the video into 3 formats such as .mp4, .webm, .gov But still background video is not playing in safari browser

<video autoplay="" muted="" loop="" id="myVideo">
    <source src="videos/2.0-Welcome-to-DISTRO_1 (1).ogv" type="video/ogv">
     <source src="videos/2.0-Welcome-to-DISTRO_1 (1).webm" type="video/webm">
    <source src="videos/2.0-Welcome-to-DISTRO_1 (1).mp4" type="video/mp4">
    </video>

page url is http://gnxtsystems.com/cookie-test/

Please help me to fix it. Thanks in advance.

回答1:

Try these two things..

add playsinline attribute in video tag like this

<video class="video-background" autoplay loop muted playsinline>

and secondly for apple devices you will have to turn off the low power mode.

then check...it will work

回答2:

It might be because of the mime type. Try only mp4 file. And for some reason, videos would not play on iPad unless I set the controls="true" flag. Example: This worked for me on iPhone but not iPad.

<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

And this now works on both iPad and iPhone:

<video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

回答3:

you need to use a poster attribute according to standards and must not load the video background on mobile devices. Then a ogv is a webm format so you'll need to use:

<video autoplay="" muted="" loop="" id="myVideo" poster="image.jpg">
    <source src="videos/2.0-Welcome-to-DISTRO_1 (1).ogv" type="video/webm">
    <source src="videos/2.0-Welcome-to-DISTRO_1 (1).mp4" type="video/mp4">
</video>

No need to load webm as you'll load ogv and only if it's not possible to load ogv it will load mp4. The poster attribute is used since the video loads and should be used on mobile devices as background without loading the video according to mobile-first design to not waste visitor's data and to get a benefit on load time.

EDIT: And try to use always names without spaces when working on web:

videos/2.0-Welcome-to-DISTRO_1 (1).ogv
should be:
videos/2.0-Welcome-to-DISTRO_1_1.ogv

Here is a working example that you can inspect: http://joelbonetr.com/

回答4:

It's quite simple if you are using it in React. You just need to enable it to play inline and disable "picture in picture" feature.

<video className="background-video" loop autoPlay playsinline="true" disablePictureInPicture="true">

来源：https://stackoverflow.com/questions/49434566/background-video-is-not-playing-in-safari-browser-on-mobile-and-desktop