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>
Related
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>
When using html 5 video tag, does the preload="metadata" attribute load the video already? I'm a bit concerned about the performance issue on page load is should the video size be greater than 100MB.
I notice that when having this attribute, an image of the very first second of the video is loaded but does not exactly play the video.
<video width="320" height="240" controls preload="metadata">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
The preload attribute provide a hint to the browser about whether optimistic downloading of the video itself or its metadata is considered worthwhile.
The metadata won'y download all video immediately only the meta data.
The specification advises it to be set to metadata.
Here a list with all the options available:
none - Hints to the browser that the user likely will not watch the
video, or that minimizing unnecessary traffic is desirable.
metadata -
Hints to the browser that the user is not expected to need the video,
but that fetching its metadata (dimensions, first frame, track list,
duration, and so on) is desirable.
auto - Hints to the browser that
optimistically downloading the entire video is considered desirable.
More information: https://developer.mozilla.org/en/docs/Web/HTML/Element/video
As per spec, it shouldn't download the whole video, only the metadata, but WebKit browsers apparently do preload the whole video before the metadata.
I hope this helps.
Also see: Problem retrieving HTML5 video duration
It depends on the browser and device.
Chrome buffers 25 seconds of video on desktop but none on iOS or Android.
This means that on mobile, there may be playback startup delays that don't happen on desktop: https://developers.google.com/web/fundamentals/media/video#preload
Maybe I'll put my 2 cents...
The solution that is allways works for me is to set "autoplay" "muted" options in VIDEO html tag. Then, when the page has fully loaded i pause, unmute and rewind the video in JavaScript before the video is shown. God... what would we do without JS. HTML lacks some stable cross browser options sometines :) Hope this helps someone.
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 have the following HTML5 video element in my test page:
<video width="1280" height="720" loop="loop">
<source src="http://d1dsyb3mv0b0i6.cloudfront.net/test/lines.mp4" type="video/mp4" />
Your browser does not support the video element.
</video>
I want it to loop its playback, so I set the loop="loop" (and I also tried simply loop), but for some reason Chrome 23 does not restart the video when it ends. I specifically moved the video to a Cloudfront Download distribution to get the partial content request support on the server, which is supposedly needed for Chrome to perform looped playback, but unfortunately that does not seem to make a difference. Note that in Safari all works fine. Then again, Safari has no trouble looping even a local video file, so it does not need a server with partial content request support.
It seems to be Cloudfront-related, since this movie does loop correctly: http://media.w3.org/2010/05/sintel/trailer.mp4.
Anyone any ideas?
You need to properly set the content-type metadata on the S3 object to reflect the correct MIME type of the file. Chrome tends to be more picky about this than other browsers.
I have uploaded trailer.mp4 to Cloudfront (S3) as well and that does work. This mp4 even works from the local file system, so unlike what I thought, I don't specifically need to play the video from a server that supports partial content requests. So it seems that the lines.mp4 video is somehow different from the trailer.mp4 video. I'm very curious to find what the difference is that makes this video not loopable by Chrome, whereas it loops fine in Safari...
Loop worked for me, but try replacing loop with the commands:
autoplay onended="this.currentTime=0"
or
autoplay onended="this.load()"
The second option results in flicker during the reload. The first ran smoothly, but currentTime can behave differently, depending on other settings. Hope that works.
Alright, I have a server that serves a motion-jpeg stream over http. What I would like to be able to do is connect to the server and visualize the stream in a browser, preferibly inside a canvas element. Browser should be Safari Mobile.
Is it possible to take the stream with XMLHttpRequest, take the single JPEG images out and put them within a canvas element? Keep in mind that the stream is live, thus possibly endless.
Sorry to revive an old topic but i was faced with this problem and i didnt want to use an other player just native html5
I found one way to display the video inside html5 with "poster" attribute
<video width="360" height="420" controls poster="/video" autoplay>
<source src="/audio.ogg" type="audio/ogg" />
</video>
Might not be what you expected but it works.
iOs mobile Safari supports MJPEG natively over http. Is there specific reason you need it in Canvas?
see http://bridgecam2.halton.gov.uk/mjpg/video.mjpg?camera=1 on a ipad/iphone