safari and IE11 won't play html5 video - html

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>

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>

HTML Video autoplay is not working on iphones

<video width="100%" playsinline preload="metadata" style="object-fit: cover;height:100%" muted="true" autoplay="true">
<source src="{{video_url}}" type="video/mp4"/>
</video>
On a Shopify site, I have a section with Video Background without audio (also muted). playsinline attribute was added.
Does anyone know how to fix this problem?

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

Firefox cannot play mp4 under <video> tag but success in Chrome

Why I failed to play the 1st LINKED mp4 video but
success in 2nd LINKED mp4 video in firefox 45.0.2 (newest already)?
Chrome can play both successfully.
What's the problem?
<html>
<body>
<!-- Failed -->
<video width="320" height="240" controls>
<source src="http://video.appledaily.com.hk/admedia/20160413/12042016_int_09new_w.mp4" type="video/mp4">
</video>
<!-- Success -->
<video width="320" height="240" controls>
<source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4">
</video>
<!-- Success and the mp4 is downloaded from 1st link -->
<video width="320" height="240" controls>
<source src="12042016_int_09new_w.mp4" type="video/mp4">
</video>
</body>
</html>

html5 video background safari and Windows Phonenot found

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 !