html5 video background safari and Windows Phonenot found - html

i want a video background in my new landing page, the video background is fine in Chrome, Firefox, Opera and IE, but not in Safary and Windows Phone.
This is my code:
<video autoplay loop id="video-background" muted>
<source src="video/video.ogg" type="video/ogg" />
<source src="video/video.webm" type="video/webm" />
<source src="video/video.mp4" type="video/mp4" />
</video>
Does Safari needed other video format?
Thanks for the help !

Related

Video dosn't play on Iphone, but play on chrome

What to change to work on Iphone? In chrome it work.
<video class="video"
autoplay loop preload muted playsinline
poster="#/assets/video/posters/02.png"
>
<source
src="https://drive.google.com/uc?export=download&id=1-SKkq6GLCPXc3MeSvsWED12GK6NkR_Tp"
type="video/mp4"
>
</video>

Video won't autoplay on mobile safari and firefox

<video autoplay playsinline loop class="desktop">
<source src="https://cdn.shopify.com/s/files/1/0550/6236/4360/files/ARCHIVE.mp4?v=1614799234" type="video/mp4">
</video>
I have an issue that the video won't automatically play at firefox and safari on mobile. I have no idea and I'm out of ideas why the behaviour is just on mobile and not on browser.

Safari doesn't play .mp4 videos

This works fine on Chrome, but not on Safari.
<video id="video" class="video" preload="metadata" autoplay="" loop="" muted="" >
<source src="images/video.mp4" type="video/mp4">
</video>

The mp4 video's Codecs is H.264.
To play this video, I had to convert this mp4 to HEVC. Voila, this solved it!
<video id="video" class="video" preload="metadata" autoplay="" loop="" muted="" >
<!-- for safari - HEVC -->
<source src="images/video.mp4" type="video/mp4">
<!-- for chrome - H264 -->
<source src="images/video.mp4" type="video/mp4">
</video>

I added a couple of more lines of code because this background video wasn't playing on mobile(iphone chrome and safari)
<video id="video" class="video" preload="metadata" autoplay muted loop playsinline>
<!-- below is for safari - HEVC format -->
<source src="images/home-video.mp4" type="video/mp4">
<!-- for google - H264 format -->
<source src="images/hero-video.mp4" type="video/mp4">
<!-- for mobile -->
<source src="images/hero-video.webm" type="video/webm">
<source src="images/hero-video.ogg" type="video/ogg">
</video>
Now I'm having an issue with this video not playing on Android(Chrome).. smh

A nice and simple hack is to simply duplicate the file and make use of the .m4v extension at the end instead of .mp4 and use content type video/x-m4v instead of video/mp4.
example:
<video preload="metadata" autoplay="" loop="" muted="" >
<!-- for safari or iOS or anything Apple -->
<source src="images/video.m4v" type="video/x-m4v">
<!-- for chrome, firefox, android and remainig friends -->
<source src="images/video.mp4" type="video/mp4">
</video>
See: https://en.wikipedia.org/wiki/M4V

Why is my video code not working in Internet Explorer and Safari?

Why isn't this working in Internet Explorer and Safari?
<video loop autoplay controls muted="" width="100%" height="auto">
<source src="http://modified-template3.medien-host4.de/wp-content/uploads/2018/06/template.mp4" type="video/mp4" />
<source src="http://modified-template3.medien-host4.de/wp-content/uploads/2018/06/template.webm" type="video/webm" />
</video>

safari and IE11 won't play html5 video

Why wont this simple piece of code work on safari and IE ?
Do i need to have a flash fallback for IE11, im not getting any errors in the console at all, i just get the player shell and nothing will play
<video id="video" width="800" height="600" style="border:1px #000 solid;" autoplay>
<source src="videos/c1rcardiffrmackeyrunit1.ogv" type="video/ogg">
<source src="videos/c1rcardiffrmackeyrunit1.mp4" type="video/mp4">
<source src="videos/c1rcardiffrmackeyrunit1.webm" type="video/webm">
</video>