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
Related
I am developing a video based timeline where each video will be played automatically while scrolling.
I'm only showing one video at a time when it scrolls into view, and then I'm removing DOM video node as it scrolls out and thats working perfectly fine.
{this.state.playing == key &&
<video autoPlay muted loop>
<source src={"/static/webm/videos/"+video.webm} />
</video>
}
The problem I have are slow networks, if a user has slow internet connection and keeps on scrolling every removed video they scrolled past even though no longer existing in the DOM tree continues to be downloaded which causes the website to very quickly come to a halt and waste my resources.
As you can see in here when I tested my site with dev tools and throttling enabled:
So my question is how do i stop video from being downloaded in the background after its been removed from the DOM before finishing the download?
If you use the built-in video support in the browser then there is no way to control the amount of data that's being buffered. It depends on the browser implementation and there is no API to control it.
Your best bet here is to use another player implementations which support these functionalities like dash.js, Bitmovin Player
<video id="video" preload=auto autoplay controls>
<source src = "http://www.w3schools.com/html/mov_bbb.mp4">
</video>
Youtube uses notes once a user defines one in his videos.
they are called annotations. Something like this:
http://www.incomediary.com/wp-content/uploads/2013/08/types-of-youtube-annotations.jpg
Is there an easy way to display it on a specific X, Y on my video,
full screen or not? for certain reasons,
I don't want the notes to be displayed on a canvas,
just on a video. How does youtube do it? I suspect that
they don't use canvas, since when right clicking on their videos show it's a video element.
EDIT: I forgot to mention, the annotations should be able to display dynamically - for example it can be displayed all of the sudden at minute 5:33, because maybe JS received something from Node server stating so.
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.
My website currently loads a video in the banner when a desktop user visits the webpage. Currently the video is hidden but will still download if the user is on a mobile device. I would like to keep the video from downloading if the screen size below a certain count. I'm not sure how to go about this, I know of the display:none that can go along with CSS but this still downloads the file which is something I'd rather not do if the video isn't going to show at all.
If jQuery is fine, here's something you can try:
$(function(){
if($(window).width()>640){ //add video only if screen width is above 640px
$("body").append(yourVideoHere);
}
});
You need to first check to see if the screen is the appropriate width and then load your video source. Something like this should get you started.
var videoElem = document.querySelector('video');
var yourThreshold = 600;
if (screen.availWidth >= yourThreshold) {
videoElem.append('<source src="yourVideo.mp4" type="video/mp4"');
}
You can of course decide how specific you want to be as far as targeting devices. Just the width alone might not suffice.
Depends how you are trying to load the video, I would recommend the HTML5 video element with the preload attribute set to none so the video does not automatically begin to download. You could also then look at using a script that allows you to swap out video files depending on screen resolution, so for mobile you could load a smaller video size, a script that can get you up and running quickly is enquire.js. Hope this helps.
<video poster="image-location.jpg" preload="none">
<source class="mp4" src="video-location.mp4" type="video/mp4">
<source class="webm" src="video-location.webm" type="video/webm">
<source class="ogg" src="video-location.ogv" type="video/ogg">
<!-- Fallback Content such as embed YouTube video-->
</video>
How to do it based on screen size
see the other answers, measure screen size with javascript and only add the video tag, or set the source, if the screen size is big enough.
There's a gotcha if you use jquery as the <video> functions like .play() are javascript functions and won't be available to a jquery object.
How to actually do it
The best current solution for the problem of avoiding sending large video files to devices that haven't got the available bandwidth to handle it is currently server side and relies on the much more reliable metric of actual bandwidth. This is what YouTube do.
Consider the following two scenarios:
I'm at home, I have my smart phone connected by wifi to my high speed internet connection and the signal is good, but my screen resolution is reported as 480px - why should I be denied a video?
I'm out of the house, I've connected to wifi on a train, but the signal is horrible, my screen size reports as 1600px so I get a huge video, your site doesn't load and I go visit your competitor.
You can find out more about this here at MDN, and about one of the key tools, ffmpeg here, or you can use Any Video Converter to do a similar thing in a desktop GUI if you have full control over the videos. It's complicated and difficult and you may be better off using a third party service.
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?