Background video, for my website, is not playing on iPhone:
<video id="video">
<source loop="true" id="vid" src="assets/img/watch.mp4" type="video/mp4">
</video>
use muted and autoplay attribute in video tag
<video id="video" muted autoplay>
<source loop="true" id="vid"
src="assets/img/watch.mp4" type="video/mp4">
</video>
Related
I am trying to figure out why the video is not autoplaying in IOS devices?
<div class="video-container">
<video id="intro-video" video-src="https://www.w3schools.com/html/mov_bbb.mp4" poster="" playsinline autoplay muted loop>
<source video-src="https://www.w3schools.com/html/mov_bbb.mp4" video-width="1600" playsinline autoplay muted loop>
<source video-src="https://www.w3schools.com/html/mov_bbb.mp4" video-width="900" playsinline autoplay muted loop>
<source video-src="https://www.w3schools.com/html/mov_bbb.mp4" video-width="480" playsinline autoplay muted loop>
</video>
Playsinline is already added as described in the IOS video documentation
webkit-playsinline is not added
Most modern web-browsers don't allow to auto-play audio and video if there is no interaction from the user, as a click on the webpage.
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
I have video
<div id="video" style="--aspect-ratio:3/1;">
<video autoplay muted loop>
<source src="fotky/video.mp4" type='video/mp4; codecs=" H.264/MPEG-4"'>
<source src="fotky/video.ogv" type="video/ogv" >
<source src="fotky/video.webm" type="video/webm" >
<p>Váš prohlížeč nepodporuje video</p>
</video>
</div>
And in IE 11 it does not show anything. I tried codecs like is described here. But not even type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' worked.
What can I do to make it work? Any different codec?
Edit:
<div id="video" style="--aspect-ratio:3/1;">
<video autoplay muted loop>
<source src="fotky/video.mp4" type="video/mp4">
<source src="fotky/video.ogv" type="video/ogv" >
<source src="fotky/video.webm" type="video/webm" >
<p>Váš prohlížeč nepodporuje video</p>
</video>
Try to remove codec and pass the type with in double quotation works on my side in IE 11.
<!doctype html>
<head>
</head>
<body>
<div id="video" style="--aspect-ratio:3/1;">
<video autoplay muted loop>
<source src="C:\Users\Administrator\Desktop\SampleVideo.mp4" type="video/mp4">
<source src="fotky/video.ogv" type="video/ogv" >
<source src="C:\Users\Administrator\Desktop\big-buck-bunny_trailer.webm" type="video/webm" >
<p>Váš prohlížec nepodporuje video</p>
</video>
</div>
</body>
</html>
Output:
I would like to ask if there is someway I can hide this rewind line from my webpage?
I have a website with fullscreen video and I would like to disable any kind of rewinding.
My code:
<video autoplay="true" loop controls muted>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
You can't hide only the video scroller. You can hide the entire controls panel:
Just lose the controls attribute from your <video> tag:
<video autoplay="true" loop muted>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
I'm making a portfolio at the moment, and I want an mp4 file running in the background.. I know how to get it to loop & repeat, but apparently i can't figure out how to do it at the same time..
Here is the code I'm trying to do it with
<div class="wrapper">
<div class="screen" id="screen-1" data-video="vid/NycTrafficH264.mp4">
<h1 class="video-title">#K Designs</h1>
<!--for Video autoplay-->
<video controls autoplay>
<source src="vid/NycTrafficH264.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
<!--For video loop-->
<video controls loop>
<source src="vid/NycTrafficH264.mp4" type="vid/NycTrafficH264.mp4">
<source src="movie.ogg" type="video/ogg">
</video>
</div>
</div>
You just need to add the loop attribute to the same node. Try the below code:
<video controls autoplay loop>
<source src="vid/NycTrafficH264.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
I hope this is what you are looking for.