Develop Reference

Displaying at least 100 videos on a single Web page

I would like to display a webpage with a wall of very short videos:
The videos are 1-2s long and all the same size (about 100px wide)
They are display in the form of a matrix (e.g. 10x10)
Playing the videos is triggered by user interaction (click or hover)
So far, I have tried inserting video tags using jQuery but when I reach about 60 videos, my browser (Chrome) hangs.
My question: is there a trick to display such a large quantity of videos on a single web page and what issue should I look out for to make sure the videos are ready to play before the user starts to interact.
EDIT: I understand this isn't common practice, but this project is an art installation and I need to be able to trigger all the videos (or moving images) on demand and without delay. On the other hand, the initial loading time doesn't matter so much, as the user will be made aware of the heavy load.
Thanks :)

IMO "videos are ready (...) before the user starts to interact" contradicts a leightweight DOM. You cannot have both. I'd try to show thumbnails and initialize the video with the interaction.

you could try to use the
use the
<video width="320" height="240" controls>
<source src="embed Link" type="video/mp4">
Your browser does not support the video tag.
</video>
tag inside of html. then you can acces every object by giving it a tag

How to stop download video in HTML5 player

I have multiple HTML5 videos <video> on one page. When I play first, it starts downloading. But when I pause or stop it, download continues. When I play next video on the same page, there are two video downloads in the same time.

set the attribut preload="none" in the video tags or preload="metadata" if you want the length and other data upfront.

Question is similar as here. Try to use Media Source Extension.

How do I get an embedded youtube video to autoplay suggested videos?

The title pretty much sums my question up. I've given a cursory glance to https://developers.google.com/youtube/iframe_api_reference and have searched online but all I have found are explanations on how to get an embedded video to autoplay (the first video only) while preventing the suggested videos list at the end. I think that perhaps the logic for playing suggested videos is only supported on youtube.com itself, a conclusion that might be supported by the autoplay button being outside of the video element.
As a worst case solution, I thought maybe if I could save a youtube.com page to my desktop I could modify the styling to only show the video. But alas, the page breaks when I try to load it from my hard drive as opposed to the website.
Edit: Take note that I'm talking about two different types of autoplay here. One is the autoplaying of suggested videos as seen in the picture, and that is the type of autoplay I want to be able to use in an embedded player. The other type of autoplay that I don't need help with is getting the embedded player to automatically play the video that is contained in its iframe src, aka the first video.

Since you marked iframe under your tags and I can't comment, I will try to answer.
If you're using iframe then make sure
autoplay=1"
is on
<iframe id="ytplayer" type="text/html" width="720" height="405"src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1"frameborder="0" allowfullscreen>
I found a link that will build it for you. It was a bit into the api link you gave.
https://developers.google.com/youtube/youtube_player_demo
You can give it the video and tell it what you want it to do.

How to Capture youtube video as image which is been played in iFrame?

I am using Youtube API and playing a video from youtube by sending video ID.
and video is been played well.
Code:
<iframe width="420" height="315" src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
Now i have a button and i want the javascript to capture the frame which is been played at that particular time.
<input type="button" id="capture" value="Capture" onclick="Captureimage();"/>
like we have this screen capture in VLC media player
I want to have the same functionality here.
Since its an embedded media(Video inside iFrame), struggling bit.
tried with html2canvas. No lucks.
Can anyone plz help.
Regards,
Arun

Stop playing parent frame HTML5 audio from an iframe?

Quick question: I have an HTML document playing HTML5 Audio. Nothing fancy. Textbook really.
<audio id="audioclip" preload="auto" loop >
<source src="audio/music01.ogg" type="audio/ogg">
</audio>
The same HTML document features an iframe containing a few Images. Clicking on one of these images browses to a page containing an autostart HTML5 video clip.
Of course now the audio from the parent AND the audio from the iframe video play at the same time.
Is there an EASY way to stop the parent audio playback from inside the iframe automatically when the autoplay video triggers?
I found some pretty complicated stuff for parent/child communication. Far to sophisticated for me. But I also found this little snippet:
jQuery(function($) {
parent.$("#parent_element").trigger(event);
} (window.jQuery));
Could I put that to use in my case?
Or are there alternatives?
Just getting into JavaScript a little more, atm I'd consider myself a newbie. :-\
Many Thanks!
PS: On video end the iframe page automatically browses back to the previous page. It would be super-nifty if the audio would resume playing at the Point IF it was playing before. If not then...well...not. But I reckon that would be much more complex?