I was interested to see how playing multiple videos simultaneously affected the performance of a web page. This probably seems a little like a time machine back to 1995 - I’ll soon be posting about flashing red text and Dreamweaver!
However, playing short videos with only a few frames can be a way to draw attention to a particular part of the page; for example, if you’re browsing a clothing catalogue and one of the models moves when you hover over.
It’s worth pointing out that the entire page will be local, and so I have no network considerations whatsoever. This isn’t, however, about having three Netflix streams running at the same time - it’s short, and small videos.
The video that I’m using came from here. I’m creating an effect whereby you hover over an image of a space ship and it explodes.
MP4
It’s worth bearing in mind that most video formats are not supported by most browsers. MP4 is the exception, so it looks like this is the way to go for video encoding. I used this tool to convert the file.
HTML
Here’s the HTML for a single icon:
[code lang=“HTML”]
Clearly this could be neater if the CSS was separated, but essentially what we have is a _div_ element with a scaled background image, which contains a video (currently hidden). The next thing is the Javascript that plays the video:
``` js
function loaded() {
var imgs = document.getElementsByTagName("div");
[].forEach.call(imgs, function (item) {
if (item.style.backgroundImage !== "") {
item.addEventListener('mouseover', hoverImg, false);
}
});
}
function hoverImg(e) {
var vid = document.getElementById(this.id + "-video");
vid.onended = function() {
vid.style.visibility = 'hidden';
}
vid.style.visibility = 'visible';
vid.play();
}
This iterates through all the div elements and, for those that has a background image, hooks up a hover event. I’ve also assumed that the div element will be named using the format “{imagename}-video”.
Conclusion
I tried this with seven videos simultaneously, and didn’t see any jerking of the animations. Whether this would stand up under networked conditions, it’s hard to say, but with the video locally available, performance is fine.
References
https://www.w3schools.com/html/html_media.asp
http://www.online-convert.com/
https://www.w3schools.com/html/html5_video.asp
https://stackoverflow.com/questions/10881678/html-play-a-video-inside-an-image