How can I stop opening video in full screen in Safari? - html

How can I stop opening video in full screen in Safari? The video starts playing on click on the button, which shows only in browsers where autoplay video is forbidden.
Demo

add the playsinline property to your view, as described in https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html
eg
<video autoplay preload="auto" playsinline controls>
<source src="....">
</video>

Related

HTML5 Video autoplay bug on iOS devices

I'm trying to autoplay video without sound and controls on my iPhone 14Pro. The video should also repeat so I have included a loop option. It seems like the video does not show at all on iOS devices. Everywhere else works. The iOS version I have is 16.2.
I have tried to add options like autoplay muted and playsinline but nothing seems to have an effect. Here is the code:
<video class="video" preload="none" muted loop autoplay playsinline>
<source src="my-video.mp4" type="video/mp4" />
</video>
Is there any workaround how I can make this work on iOS devices without controls and autoplay?

HTML5 - how to autoplay video tag on mobile browser?

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

Chrome : my video start in autoplay when accessing the page, but not when reloading the page

All is in the title. When i access a page with a video tag, autoplay works fine.But when i reload the page, the video dont start.
What can i do to auto start the video ?
<video autoplay loop poster="the_poster.jpg" id="bgvid">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>
i try to add a ?ts=timestamp.
i try also to start the video with JS but i get a "promise error"
I've had same issue here and it solved by adding muted attribute to video tag.
For Google Chrome, according to this update note, autoplay with sound needs some conditions. However, Muted autoplay is always allowed.

My video header wont't play when the page loads

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();
}

video in html not working in safari browser

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>