I have wordpress home page where I added video tag.
This is source code.
<video id="video1" width="auto" autoplay loop controls="false">
<source src="Browser#2x.mp4" type="video/mp4">
</video>
Here, what the important is controls="false" and autoplay loop,
I want to hide controls and autoplay with looping.
It work well in chrome but not working in safari.
It weird at first I open it on safari it works but if I reopen, it doesn't.
I want to know how to solve this and if I have to use other video file type, what should I use?
Try this:
<video loop autoplay controls="true" id="video1" src='Browser#2x.mp4' type='video/mp4'></video>
Related
I have got stuck using a video tag in different browsers. In Chrome, this works perfect (video shows image and audio).
<video #myvideo [src]="urlvideo" height="300" style="width: 100%;" controls autobuffer autoplay playsinline webkit-playsinline="webkit-playsinline">
However, in Firefox it is not possible to hear the video (shows only image, controls show muted and disabled audio button). Also, in Opera it is not possible to view the video (can hear audio only, controls are visible).
Using source tag, adding or removing the optional attributes, it behaves the same way:
<video height="300" style="width: 100%;" controls autobuffer autoplay playsinline webkit-playsinline="webkit-playsinline" onloadedmetadata="this.muted = false">
<source [src]="urlvideo" type="video/mp4">
</video>
More info: Tried on Ubuntu and Windows, and the results are the same. Browsers DevTools does not show any incompatibility warning or error.
I guess I am missing something, do you know what could it be or have any advice? Thanks in advance.
Though mp4 should work across all browser I advise you to check other version too. Use below code that need other variation of videos.
<video width="100%" height="300" controls="controls">
<source src="media/intro.mp4" type="video/mp4"/>
<source src="media/intro.ogv" type="video/ogg"/>
<source src="media/intro.webm" type="video/webm"/>
</video>
i want to add a loop video on my react-app.
I did it like this
<video
ref={videoRef}
playsInline
autoPlay
muted
loop>
<source src={Video} type='video/mp4' />
</video>
it's working fine on Chrome/Firefox on mobile and on desktop.
But it's not playing on iPhone (Safari).
It is playing locally but when i deploy it. it's not playing :(
I had a similar kind of requirement with my previous project, the following code is working fine, from this we will have a muted video running in loop with autoplay.
<video width="300px" height="500px" autoplay="autoplay" muted loop>
<source src="https://user-images.githubusercontent.com/27606753/144578902-9b14dc56-9056-4650-942f-4d25f0ecbcc1.mp4" type="video/mp4" />
</video>
This is so because, according to the apple documentation, a video only plays automatically if:
it contains the playsinline attribute, and
it has no audio track present OR it contains the muted attribute.
So I'd suggest you include the playsinline attribute. Learn more on inline playback here.
I created a sandbox and deployed but was unable to reproduce your issue on iOS 15.2 (iPhone 12), it autoplays and loops as expected. Could please add more details?
this screenshot on mobile, the video doesn't autoplay even when i click on the play arrow button(which shouldn't even be there) still doesn't play at all, its like a picture but on desktop it's perfectly fine.
I tried this code
<video preload autoplay loop muted defaultMuted playsinline>
<source src="video2.mp4" type="video/mp4">
</video>
but still no
I have a video in my header, however, it will only play once you click on the home link in the menu to go to the /index.html. It will not play when the page first loads. I have also tested to see if manually entering /index.html at the end of the url works, it does not. The code I am using to play the video is:
<video autoplay loop>
<source type="video/mp4" src="images/untitled.mp4" />
<source type="video/webm" src="images/untitled.webm" />
</video>
And my website is http://richardgao.5gbfree.com (source code can be checked)
How do I get the video to play automatically when I first load the page?
Thanks
have you tested it in chrome? for chrome you need to switch off sound:
<video autoplay muted loop> ... </video>
and at least on some versions of safari autoplay doesn't work at all. you might start your vid using jquery, something like:
<video id="video" ...> ... </video>
$(document).ready() {
$('#video').play();
}
I'm using autoplay video sporadically throughout a client's site, however the below code is (for some reason), not autoplaying in Chrome(63.0.3239.132). Works fine in Safari and FF.
I am not getting any console errors either?
<video src="https://player.vimeo.com/external/247833422.hd.mp4?s=8d872a36d3dbe7f74e9613ab144d088b5bab6649&profile_id=174" poster="" preload autoplay loop muted></video>
Quick fix for Chrome:
<video src="https://player.vimeo.com/external/247833422.hd.mp4?s=8d872a36d3dbe7f74e9613ab144d088b5bab6649&profile_id=174" id="video1" poster="" preload autoplay loop muted></video>
<script>
document.getElementById('video1').play();
</script>
In addition to this, set the video to muted <video autoplay loop muted><source...
According to google chrome's policy unmuted videos will not auto play or programmatically play. To auto play video just mute your video by add muted attribute like below :
<video autoplay loop muted="muted"></video>