Dynamic HTML5 video playlist that has no pause between videos? - javascript

Background:
The videos in my play list are all 1/2 second to 4 seconds long.
The playlist is randomly generated on page load.
Strategies
HLS Streaming - I've implemented this strategy (m3u8 playlists) and it works, but there were several issues with it.
Preloading all the vidoes - I am lacking experience and in-depth knowledge of HTML5 video. I have implemented a demo that preloads all the videos in separate <video> tags and then switches them in and out as needed. This works in Chrome, has frequent pauses in Safari, and violently crashes OSX in Firefox.
Is there a better way to do this?
Maybe a better strategy to preloading the videos?
Thank you so much.

Related

Chrome Extension to manipulate youtube videos

I want to develop a chrome extension that can read the pixels of a youtube video and for example can swap all red pixels to blue ones.
After a little research i found that most answers are outdated.
all approaches i found started with getting the html5 video (and after that go on with canvas):
Show Youtube video source into HTML5 video tag?
Would be very thankfull if you can help me:)
Have a nice day.

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?

Making an HTML5 Audio Player for mobile browsers

I've spent a few days digging almost any post possible on this subject.
So far I haven't been able to find a proper solution.
Basically I would like to create an HTML5 audio player that plays music (one file at a time) on mobile browsers (iOS/Android) that will play the music instantly when the user clicks "Play" (just like youtube works on mobile browsers) and that the browser won't try to load/cache the whole file first before it plays it.
I tried Audio Sprites and that didn't work well (it is mostly related to web games).

JS play videos and images in sequence

I am trying to play videos and images in sequence in html. I know it's not possible to play videos and images in sequence using html5 video player. I know generating video out of images and video is one solution but My scope very limited i need to play videos and images in html5 only. Is there any libraries or solution to achieve this.
Can you use a gallery? https://html5box.com/html5gallery/ is an option.
jQuery Image and Video Gallery Plugin - Awesome Image and Video Gallery, Supports Images, Flash, YouTube, Vimeo, MP4, M4V, OGG, OGV and WebM Videos, Works on Android, iPhone, iPad, Windows Phone and All Modern Web Browsers
[...]
Multiple Galleries on One Page: You can create multiple photo or video galleries on one webpage without any extra settings.

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.

Categories