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 have an autoplay background video that doesn't play when the page loads in Microsoft Edge. The poster is loaded instead. As soon as you click refresh it then starts playing.
The autoplay works in Chrome, Firefox and Safari.
The url is: www.obel-logistik.com
I have un-minified the source for this question.
Any ideas?
Fixed in later versions of Microsoft Edge browser.
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).
We filmed a spokesperson on a green screen and have the video files ready in multiple formats.
With Flash we could use the wmode transparent within the param and embed tags, but is there something similar to this with the video and source tags in HTML5? Is it even possible to properly save .m4v or .ogv videos so that we can play these files with transparent backgrounds on our browsers?
Thanks
Yes, this sort of thing is possible without Flash:
http://hacks.mozilla.org/2009/06/tristan-washing-machine/
http://jakearchibald.com/scratch/alphavid/
However, only very modern browsers supports HTML5 videos, and this should be your consideration when deploying in HTML 5, and you should provide a fallback (probably Flash or just omit the transparency).
Chrome 30> supports video alpha transparency.
http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video
Update: Webm with an alpha channel is now supported in Chrome and Firefox.
For other browers, there are workarounds, but they involve re-rendering the video using Canvas and it is kind of a hack. seeThru is one example. It works pretty well on HTML5 desktop browsers (even IE9) but it doesn't seem to work very well on mobile. I couldn't get it to work at all on Chrome for Android. It did work on Firefox for Android but with a pretty lousy framerate. I think you might be out of luck for mobile, although I'd love to be proven wrong.
These days, if you use two different video formats (WebM and HEVC), you can have a transparent video that works in all of the major browsers except Internet Explorer with a simple <video> tag:
<video>
<source src="video.mov" type="video/quicktime">
<source src="video.webm" type="video/webm">
</video>
Note: It's important that the WebM version come second since Safari currently supports WebM, but not WebM transparency.
Here's a demo you can test with
I struggled with this, too. Here's what I found. Expanding on Adam's answer, here's a bit more detail, including how to encode VP9 with alpha in a WebM container.
First, here's a CodePen playground you can play with. Feel free to use my videos for testing.
<video width="600" height="100%" autoplay loop muted playsinline>
<source src="https://rotato.netlify.app/alpha-demo/movie-hevc.mov" type='video/mp4'; codecs="hvc1">
<source src="https://rotato.netlify.app/alpha-demo/movie-webm.webm" type="video/webm">
</video>
And here's a full demo page using z-index to layer the transparent video on top and below certain elements. (You can clone the Webflow template.)
So, we'll need a WebM movie for Chrome, and an HEVC with Alpha (supported by Safari on all platforms since 2019).
Which browsers are supported?
For Chrome, I've tested successfully on version 30 from 2013. (Caniuse WebM doesn't seem to say which WebM codec is supported, so I had to try my way.) Earlier versions of Chrome seem to render a black area.
For Safari, it's simpler: Catalina (2019) or iOS 11 (2019).
Encoding
Depending on which editing app you're using, I recommend exporting the HEVC with Alpha directly.
But many apps don't support the WebM format, especially on Mac, since it's not a part of AVFoundation.
I recommend exporting an intermediate format like ProRes4444 with an alpha channel to not lose too much quality at this step. Once you have that file, making your WebM is as simple as:
ffmpeg -i "your-movie-in-prores.mov" -c:v libvpx-vp9 movie-webm.webm
See more approaches in this blog post.
At this time, the only video codec that truly supports an alpha channel is VP8, which Flash uses. MP4 would probably support it if the video was exported as an image sequence, but I'm fairly certain Ogg video files have no support whatsoever for an alpha channel. This might be one of those rare instances where sticking with Flash would serve you better.
While this isn't possible with the video itself, you could use a canvas to draw the frames of the video except for pixels in a color range or whatever. It would take some javascript and such of course. See Video Puzzle (apparently broken at the moment), Exploding Video, and Realtime Video -> ASCII
Mp4 files can be playable with transparent background using seeThrou Js library. All you need to combine actual video and alpha channel in the single video. Also make sure to keep video height dimension below 1400 px as some of the old iphone devices wont play videos with dimension more than 2000. This is pretty useful in safari desktop and mobile devices which doesnt support webm at this time.
more details can be found in the below link
https://github.com/m90/seeThru
webm format is the best solution for Chrome > 29, but it is not supported in Firefox IE and Safari, the best solution is using Flash (wmode="transparent"). but you have to forget "ios".
Quicktime movs exported as animation work but in safari only. I wish there was a complete solution (or format) that covered all major browsers.