I'm developing simple web application with video on one of the pages, but I don't want this video to open fullscreen mode on mobile devices.
I've tried to disable controls, but it still not works on mobiles.
Is there any option to do this?
Use this code for mobile browsers:
<video autoplay loop muted controls webkit-playsinline playsinline>
<source src="file.mp4" type="video/mp4">
</video>
Using webkit-playsinline and playsinline make Mobile browsers play the video right where it is instead of the default, which is to open it up full-screen while it plays.
Related
I created a simple HTML with a video https://codepen.io/anything/pen/Barvozw
<video id='video' disablePictureInPicture controls="controls" preload='none' width="600" poster="https://assets.codepen.io/32795/poster.png">
<source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4' />
</video>
I have a Single Page app and I want to disable PictureInPicture and used the disablePictureInPicture attribute on the video element but that is ignored in iOS 15.6 Safari.
This attribute seems to have an effect on my desktop chrome browser. (If you right-click on the video the pip option is grayed out.)
It may seem a dumb question but I cannot figure out a solution, I am embedding a local video using the standard html5 video syntax, the problem is that on safari / ios the video won't play and a quicktime striketrhough icon appears instead.
The same error appears on w3c page if I try to playback a video using iphone / ios (testing on xcode):
https://www.w3schools.com/html/html5_video.asp
How can I fix this problem?
This is the code I am using:
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
Thanks.
I have a website that has a muted autoplay video in the background.
I have this:
var vidSource = document.getElementById('vidSource');
vidSource.setAttribute('src', 'images/background-mobile.webm');
window.addEventListener('touchstart', function() {
$('#backgroundVid').prop('muted', !$('#backgroundVid').prop('muted'));
});
<video id="backgroundVid" loop muted autoplay class="videoPlayer">
<source id="vidSource" type="video/webm" />
</video>
It works if I run the code in a click event with a desktop browser.
However, with Chrome for Android, the video freezes when the touch event is triggered.
I guess the same happens with Safari for iOS, aswell with many other mobile browsers.
I know videos need to be muted so that they can be autoplayed on mobile, but how can the user unmute them afterwards? (e.g.: by touching the screen or by clicking on an unmute button)
I have a background video on my site olegefimkin.ru which should start playing automatically on page load. And it does on PC and some phones, but doesn't on some phones and tablets (e.g. iPhone).
I'm using this html code:
<video autoplay loop muted id="main-video">
<source src="/themes/basic/video/intro.webm" type="video/webm"></source>
<source src="/themes/basic/video/intro.mp4" type="video/mp4"></source>
</video>
I've also tried to add javascript video.play() but it still doesn't work in Safari.
How can i make video autoplay on mobile devices?
The video won't autoplay in Safari IOS unless you meet the following requirements:
<video> elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
<video muted> elements will also be allowed to autoplay without a user gesture.
If a <video> element gains an audio track or becomes un-muted without a user gesture, playback will pause.
<video autoplay> elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.
<video autoplay> elements will pause if they become non-visible, such as by being scrolled out of the viewport.
You need to either remove the audio from the source or mute it and enable the sound to be activated by a gesture.
From the Webkit policies for video
<video poster="video-sg.jpg" playsinline autoplay muted loop>
<source src="caffe.webm" type="video/webm">
<source src="caffe.mp4"" type="video/mp4">
Your Browser May Not Support This
</video>
On any recent desktop browser, it autoplays and loops as it should. But in mobile safari, it doesn't autoplay, or even play at all. I can't even hit the play button to get it going. Just the poster image displays.
Apologies if I'm hijacking the OP's question, but at least it's the same question!
I want to autoplay HTML5 video on iOS devices. I searched on google and here on stackoverflow for this. I found many answers (including this one ) saying that it is not possible to autoplay video on iOS 6.1 and later. Therefore it is possible to autoplay video on iOS 6.0 and earlier. But I don't know how can I do that.
Will this work on iOS 6.0 and earlier?
<body onload="document.myMovie.play()">
I don't idea avout iOS but you can try
<video controls autoplay> //autoplay commad play your video automatically after load.
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
</video>