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 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?
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 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>
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 !