CODEWITHSUNDEEP
htmlhtml5-video
Sonu Tyagi
Sonu Tyagi

Reputation: 85

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>

Please help me to fix it.

Upvotes: 7

Views: 25588

Answers (5)

Areeb Saeed Raja
Areeb Saeed Raja

Reputation: 74

You can try WEBM formate, hope it helps!

<source src="<?php echo the_sub_field('banner_background_video_webm');?>" type="video/webm">

Upvotes: -1

user6720362
user6720362

Reputation:

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">

Upvotes: 4

parag patel
parag patel

Reputation: 3283

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

Upvotes: 21

JoelBonetR
JoelBonetR

Reputation: 1572

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/

Upvotes: 0

NIKHIL NEDIYODATH
NIKHIL NEDIYODATH

Reputation: 2932

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>

Upvotes: 1

Related Questions