HTML5 video, different poster image for devices without autoplay - javascript

The video is being used as a background video.
The poster image needs to be the first frame of the video so when the
video is loading there are no jumps.
On certain devices, particularly iOS where autoplay of videos is disabled, can I choose a different image to display?
SUMMARY:
Can I show a different poster image if autoplay is disabled?
Thank you.
Note: I'm aware I can hide/show things with media queries, but this doesn't work too well with the likes of the iPad Pro around.
If possible I'd like a solution that doesn't require detecting different devices.

I don't know the specifics of how you'd do it, but off the top of my head, I'd suggest running a detection script at some point beforehand. Use a "dummy" video (perhaps something like a 1x1px blank video in a data-URI to ensure speed and synchronicity) with autoplay on, then check to see if it's playing or not after shortly after it renders. Then flag accordingly depending on whether it plays or not.

Related

How to flip a video on chrome mobile using css (when in fullscreen mode)?

I'm developing a web app whose main purpose is streaming dancing videos and I'm facing this problem just in chrome mobile, it works flawlessly in firefox mobile, and in every other desktop browser.
The thing is I need to be able to flip an html5 video element and it works... well, it works until I go fullscreen, then it stays for a few seconds and reverts to the original video (not flipped).
I'm using the css "transform: scaleY(-1)" property.
I've tried setting this property to the video tag, to an upper div, within the video tag and the div which requests fullscreen. And to the div requesting the full screen with no success. If I set scale(); to any positive number between 0 and 1, it seems to do the trick but it doesn't work with negative numbers.
I'm aware of the UA css :not(:root):-webkit-full-screen {transform: none !important}, but it doesn't seem to be the problem. I would rather say it's more related to the way chrome handles video in fullscreen mode.
Any help would be appreciated. If I can't make it work, I'll have to provide another stream with the mirrored version of each video.
Thanks in advance, If you need any examples don't hesitate on asking.

Make YouTube video quality as low as possible when out of view range

Question
So I want to have embedded YouTube videos. But when you scroll down it's just gonna use the sound and put fixed controls on the bottom of the page.
When you don't see the video anymore but just use it as sound, the quality of the video doesn't matter, so to not drain someone's internet, can I change the YouTube video's quality to the lowest possible (144p) with YouTube ? It should still be possible to change the YouTube video to its old quality when you scroll back up.
Not part of the question, but if you know this you can help me out :)
In this post I saw its not allowed to
just have the controls of the Youtube video to use it for audio. But
if I do it this way where I still use the video but when off the screen just
use the sound. Is this allowed?

Video don't open on browser of cell phone

(Using WordPress 4.7.3)
I have a video on my header background and it runs normally in the browser on desktop but when I open the browser on a cell phone, the video disappears. I checked the media queries in order to know if it is the problem, but apparently not.
Site URL: http://ratts.herokuapp.com/
Any idea what it is?
If you are talking about the video on the background, it won't work.
The only way to autoplay videos on mobile devices is to ditch the html video tag.
If you don't need audio:
Use a gif instead of the video. Depending of the animation, the file size will skyrocket though
Use a really long jpg or png that contains every frame of the video and then shift through them with javascript
Decode the video with javascript. For example use this h.264 decoder and play videos with good compression. Only downside I see is that it requires quite some CPU for the decoding.
Here's a similar question:
HTML5 video background on iPad/iphone

smooth video transition HTML5

looking to use HTML5 video tag and JS. the aim is to make a video swap from one video to the next very smoothly just like a cut in the movie. I have had a look at the API
http://www.w3.org/TR/html5/video.html#tracklist
if anyone has an idea that would be great. My current plan is to familiarise myself with the API and figuare out how to que up the video for a smooth change. currently sellect a src and then play() causes an ugly white space pause before the next video comes in.
many thanks for looking
Use firefox and make hardware acceleration on. if you have good hardware it should work.
and you can also try this method, imagine if you have 5 videos to play and when you are in the 2nd video you can keep them by the video currently you are playing ,keep them on left and right sides and make them pause. when you move on to the 3nd video you can just get that relevant video and make it play. this method should eliminate any unnecessary lags.
HTML5 videos use a very low amount of CPU, so there's no reason you can't have multiple tags on the page at the same time. I would suggest having them all on the page and then using CSS and JavaScript to transition between them.
You won't be able to make this work on iOS since it doesn't allow playback to initialize without user interaction. The user will have to click to start each video.
Annoying, but that's how Apple rolls.

How can I stop the preload of a video (HTML5 - Javascript)

I have a web page with a video player preloading 3 videos (low, med, and high quality of the same video). Then, when the user clicks on one the button corresponding to the desired version, the video opens.
What I would like to do is to then stop the preloading of the two other videos.
Is that possible? In other words, can the "preload" attribute of the HTML5 Video tag be cancelled or stopped on the fly with some Javascript ?
I just came up with a solution to a problem I had that resembles your own. I am preloading a list of movies on my page, in series, but I need to be able to jump to one of them and prioritize it ahead of whatever might have already been preloading, in order to play it as quickly as possible.
I have a div#prebuffer element that holds the preloaded videos, as they are buffered. When I need to forget about preloading, I simply do this:
var $video = $('#prebuffer video:last');
$video.find('source').attr('src', '');
$video[0].load();
// it has now stopped preloading.
// and then, because I don't want this half-loaded broken cruft hanging around:
$video.remove();
It's slightly ugly, but I wasn't able to find a nicer way. And it gets the job done.
With jQuery, you can try:
$('#videoPlayerId').removeAttr('preload');
I don't know that it will stop a video that's already preloading.
From a UI perspective, why are you trying to preload all 3 videos at the same time? This will slow down the loading speed of all three; if you only preload one of them, more of the video will have a chance to buffer before the user starts viewing it.
I would suggest preloading one of the videos of a default quality and only loading a different quality video if the user selects it. This is the behaviour used by YouTube, Netflix, and others.
There is dedicated tag nowadays:
<video preload="none" ....>

Categories