I would like to explore if it is possible to disable playsinline for HTML5 <video> on iOS, specifically for iPad. My video tag (below) does NOT include playsinline, as I wish the video to open in the native iOS video player.
Since iOS10, Apple have enabled the ability to use playsinline, however for this project I do not want this. During testing however, it seems that regardless of wether or not the attribute exists, on iPad the video will play inline regardless and I would like to disable this, forcing the native iOS player instead (just like on iPhone).
I found the following article, which states: 'When adding a video element to a HTML document on the iPhone, you must also include the playsinline attribute. The default value for iPhone is false and the default value for iPad is true."
The above suggests that this is the reason for my problem, but I'm unsure how to resolve?
Many thanks.
<video src="myurl.com" preload loop></video>
If you are happy to have the same behaviour on all devices, you can explicitly assign a value to the attribute in your HTML5 code:
<video src="myurl.com" preload loop playsinline="false"></video>
Related
Take a video like this:
<video autoPlay controls muted preload="metadata" height="100%" width="100%" playsInline>
<source src="https://video.dailymail.co.uk/video/1418450360/2015/02/1418450360_4056782948001_nerdist--1424015378606.mp4" type="video/mp4" />
Sorry, your browser doesn't support embedded videos.
</video>
It has autoPlay, controls, muted, preload, and playsInline.
On Chrome and Safari, the video will not start until some portion of it enters the user's viewport.
On Firefox, the video plays immediately, regardless of whether or not it is in the viewport.
Why?
Here is a codepen that demonstrates this. You'd have to try it on the various browsers to get a sense of what I'm talking about.
From the support of mozilla:
Some kinds of video can be played by Firefox directly. That uses the built-in HTML5 video player, in combination with the Windows Media Foundation (to decode MP4/H.264 video).
So it is default Firefox. I suggest that you could stop all the videos (mutch better user experience) and start when it is visible with JS or change it to <iframe> so the firefox don't mess it. The support suggest you to change hidden settings that help you control when videos start but this will only affect your browser not the others.
code solution with JS to play only when is visible.
Try Incognito Mode · 2. Disable Hardware Acceleration · 3. Allow Websites to AutoPlay Video · 4. Disable Add-Ons · 5. Clear Browser Cache
I have the following HTML code:
<video autoplay loop playsinline>
<source src="VIDEO-SRC-DESKTOP" type="VIDEO-TYPE" media="all and (min-width:1240px)">
<source src="VIDEO-SRC-MOBILE" type="VIDEO-TYPE">
</video>
In safari, if you open the respective URL directly, the correct source is shown. But the website is a single-page-application and if you navigate to a URL without page-reload and the video is rendered to the DOM after the initial pageload, it will always play the VIDEO-SRC-MOBILE.
For the SPA navigation I am using barbaJS. It probably also has to do with the fact that I have to actively call videoNode.play() after the page-transition as autoplay only seems to trigger on pageload as well.
Any ideas how to get safari to apply the media-query to the video-source? Or any other workaround known? I would like to avoid setting the src manually as the bug only applies to safari and it would also make the preloader-logic more complicated.
I have a simple HTML5 video embed that displays a blank (white) frame when loaded on iOS. On desktop browsers (including Safari) and Android the first frame of the video is displayed.
I understand that you can avoid this by setting an explicit poster image, but I'm hoping I can avoid having to set up a transcoding service to extract the first frame of the videos. I understand that Apple has probably chosen this route to limit the bandwidth use for mobile users, but in this instance it's just overkill to set up a transcoding service.
I've played around with the preload attribute, but neither setting it to
auto or metadata works. Is there any other way to display the first frame of the video without interaction from the user?
Here is a link to a pen where I am illustrating the problem.
https://s.codepen.io/webconsult/debug/oRmQva/vWMRwadNoNvr
And here is a screenshot of how the code is rendered on iOS simulator (same on real hardware) and in Chrome respectively.
You can use Media Fragments URI
Just Append #t=0.1 to the end of the video URL
Try following code. This is work for me
<video src="video/video.mp4#t=0.5" playsinline controls preload="metadata">
<source src="video/video.mp4#t=0.5" type="video/mp4">
</video>
I am currently making a static site that makes use of a .mp4 video. I am using Middleman and hosting with Heroku (free plan). On my local server everything works wonderfully, but in the deployed Heroku version the video appears as a black box. In Safari and Firefox there is no container at all. All my other assets seem to be loading nicely. The video is 5.9 mb. Any idea what is going on here? Thank you in advance!!
<video class="vid-home" src="/videos/home.mp4" autoplay loop muted></video>
In theory, if you do not specify a 'poster' image to display before the video starts, the browser should display the first frame of the video:
http://www.w3schools.com/tags/att_video_poster.asp
In practice browsers seem to implement this inconsistently, and I have seen some mobile devices cases where certain videos display the first frame and others a black box, even for the same video types.
To avoid the issue you can specify your own image to be displayed using the mechanism mentioned in the link above - this should work consistently across browsers. The HTML will look something like:
<video class="vid-home" controls poster="yourImage.png" autoplay loop muted>
<source src="/videos/home.mp4" type="video/mp4">
Your browser does not support the video tag or format.
</video>
I am trying to play a video in safari 5 but its just showing me a blue question mark button, no video place holder no video controls (like in chrome)
<video poster='your_pic.jpg' controls="">
<source width='480' height='360' src='/videos/my file to play.m4v' />
</video>
For safari to play videos on windows you have to install apple quick time.
http://www.agilepman.com/2010/09/how-to-make-html5-video-tag-work-in-safari-on-windows/
I'm not familiar with the syntax you have used, i.e. a source tag within the video tag. I would expect a video reference to look more like this:
<video controls="true" poster="some-image.png" src="some-video.mp4"></video>
Does the video work as expected in Chrome? Looking at the controls that do get rendered, the difference between Chrome and Safari seems to be down to embedded Quicktime (i.e. Safari uses it if it can, Chrome does not).
One other thing: if the file just doesn't play anywhere, bear in mind that .m4v files are often MPEG4 files with Apple's Fairplay DRM applied to them (although they don't have to be).