Develop Reference

Don't preload video, but still show "thumbnail"

I'm trying to display many video thumbnails/posters without actually loading the video...
Bascially what I've got is the following:
<div class="col-sm-3" style="padding: 20px;" onclick='location.href="/videoDetails/{{ #video.ID }}"'>
<video width="100%" style="cursor:pointer;"
<source src="/{{ #video.path }}">
Your browser does not support the video tag.
</video>
</div>
That hole thing is in a foreach loop and with that, it loads up to 100 videos on one page...
My problem now is that this gets super slow, the more videos there are load at once..
Now I found this answer on a StackOverflow thread, where it says to use the attribute preload="none" on the video tag... That seems to speed up the loading (because it doesn't preload the videos), however, it doesn't display any image (preview) at all..
In my case, there's no reason to load the hole video though, because (as you can see in the code), the actual video is then displayed on another page, when clicking on the div.
Also, just to make sure you got me right, I want to display the auto generated preview of the first frame of the video. I can't upload a seperate image to display it with the poster attribute, it has to be the default image..
Is there any way I can achieve this? I'm also open to Javascript/jQuery solutions...

You can get video frames in different time periods with append #t in the video source url. But with the attribute preload none value you cannot get the video frames. So You need to use the metadata value in the preload attribute.
These are the three values you can use in the preload attribute:
none - Hints to the browser that the user likely will not watch the video, or that minimizing unnecessary traffic is desirable.
metadata - Hints to the browser that the user is not expected to need the video, but that fetching its metadata (dimensions, first frame, tracklist, duration, and so on) is desirable.
auto - Hints to the browser that optimistically downloading the entire video is considered desirable. - Hints to the browser that optimistically downloading the entire video are considered desirable.
You can check the below results with these three values.
<p>metadata</p>
<video width="300" height="150" controls="controls" preload="metadata">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>
<p>none</p>
<video width="300" height="150" controls="controls" preload="none">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>
<p>auto</p>
<video width="300" height="150" controls="controls" preload="auto">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>

I would say that creating so many video HTML elements will affect performance anyhow, loading or not, since the DOM is under quite heavy pressure.
A different (and more advance) approach I would recommend is the following.
If you want that one image will load when the user clicks on it, you can "create" a video in that specific moment, triggering only the video requested.
So:
instead of the video tag, load an image with onclick listener, that will pass an ID to a JS function
when the user clicks it will create the video element.
at the same time, hide the image (or maybe a gif?)
Try to run the snippet here below :)
function myFunction(id) {
var element = document.getElementById(id);
var videlem = document.createElement("video");
element.innerHTML = '';
source = 'https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4';
var sourceMP4 = document.createElement("source");
sourceMP4.type = "video/mp4";
sourceMP4.src = source;
videlem.appendChild(sourceMP4);
videlem.autoplay = true;
element.appendChild(videlem);
}
<p>Click on the image</p>
<div id="img242">
<img onclick="myFunction('img242')" src="https://blog.majestic.com/wp-content/uploads/2010/10/Video-Icon-crop.png">
</div>

Video thumbnails are duplicated for multiple videos in a grid

Background
Creating a portfolio page showcasing images and videos using Gatsby/React. I have stored the media sources in an array and then I traverse over this array to create a grid.
Problem
The video thumbnails in the grid are getting duplicated. The second video is getting the thumbnail of first video:
Although, the dev tools show different sources for these videos.
Happens again on another page:
Video objects are created as following:
<VideoContainer key={`vid-${section}-${itemCounter}`}>
<video className="proj-video" preload="metadata">
<source src={currImg.src} type={`videomp4`} />
</video>
<div className="btn-container">
<FontAwesomeIcon color="white" size="4x" icon="play" />
</div>
</VideoContainer>
<VideoContainer /> is a styled div.
It happens on multiple videos. What I've tried so far:
Ensure that the sources of these videos are different. When the video is played (by clicking on the play button over the thumbnail), correct video is played.
Add a key attribute on the video tag as well. But, it doesn't solves the problem.
Note: It is very indeterministic behavior because it doesn't happens always. Sometime, it gets corrected on page refresh and sometimes it doesn't.
Edit
You can see that I am not setting thumbnail from another source. It just displays the video frame. I append "#t=10" (any number) at the end of video URL and add preload="metadata" on the video tag to load the frame at that time.

Try adding a more unique key:
<VideoContainer key={currImg}>
<video className="proj-video" preload="metadata">
<source src={currImg.src} type={`videomp4`} />
</video>
<div className="btn-container">
<FontAwesomeIcon color="white" size="4x" icon="play" />
</div>
</VideoContainer>
vid-${section}-${itemCounter}, for its own nature, is a good identifier but not a good key, but it seems that may not be as unique as currImg is.

Play Video button

I want to trigger play function of the video. . Can you suggest the javasript function to play this video ?
jsfiddle code is given here. To play the video I need to rightclick the video and they click play function of flashplayer.
I have the below video code in html:
<div class="content flowplayer is-splash is-closeable" id="vid1">
<video src="http://www.w3schools.com/html/movie.webm" tabindex="0">
<source type="video/mp4" src="http://www.w3schools.com/html/movie.mp4"></source>
<source type="video/webm" src="http://www.w3schools.com/html/movie.webm"></source>
</video>
</div>

I have update your code. It's working now.
You have to get element's id of tag video and then just say .play()
More example here.

Get a reference to the video element (e.g. by giving it an id then using document.getElementById), then call the play() method on it.

Add event on html5 video play button

So I only want to access the play button of the video controls, no action when pressing the track bar or volume. I want something like this but with html5 video http://flash.flowplayer.org/demos/installation/multiple-players.html
jQuery(document).ready(function() {
$('.vids').click(function(){
$('.vids').each(function () {
this.pause();
});
});
});
<video controls="controls" class="vids" id="1">
<source src ....>
</video>
<video controls="controls" class="vids" id="2">
<source src ....>
</video>
....
So now all videos stop except the one I clicked but when I press the trackbar or volume, it also stops. Any solutions without making my own controls or making use of another videoplayer? I found different solutions but not as I want :S

I think you have to target the current item which you are clicking so that the clicked target get the command to process to do this try this one and see if this works for you:
$('.box').click(function(e){
$(e.target).pause();
});

Music playing continuously with name

I was actually able to make music play continuously throughout the pages without reloading, using frames (I know music playing continuously is not a good idea but the client really requested it, so I had no choice). Here is what I used for the frame with the music playing:
<body>
<div id="player">
<audio id="audio" controls="controls" autoplay="autoplay" loop="loop" style="width:150px;">
<source src="martnalia05namoracomigo.ogg" type="audio/ogg" />
<source src="martnalia05namoracomigo.mp3" type="audio/mp3" />
<embed src="martnalia05namoracomigo.mp3" hidden="true" loop="TRUE" autostart="TRUE"></embed>
</audio>
</div>
</body>
I inserted this music just to test, and I would like to know if it is possible to make a play list and if it is possible to inform the music which is currently playing with a link in it and a button to skip a music, for example:
[player]
| button previous | button to play/pause | button next
| name of the music (link to the page of the Album) |
[end of player]
Any suggestions?

You are wanting to make a small media player perhaps, if thats the case there are plenty of ready made script available to help you accomplish this. (Google is your friend).
If you do decide to go about it on your own here are my thoughts, they may help you in the right direction.
var data = [{audiourl: "filename1.mp3", artisturl:"http://example.com",name:"Song name"},
{audiourl: "filename1.mp3", artisturl:"http://example.com",name:"Song name"}];
Some sort of data structure to store the details of your tracks.
var audio = document.getElementById("audio");
audio.addEventListener('ended', playNext);
Finally some sort of function to handle the switching of tracks
var currentTrack = 0;
function playNext(options){
currentTrack++;
if (currentTrack > data.length){
currentTrack = 0;
}
var audiosrc = document.getElementById('embed_element_id') // or some other selector method
audiosrc.src = data[currentTrack].audiourl;
audiosrc.play();
}
Im not totally sure on the HTML5 audio specification but i would assume its along these lines.
Hope this helps

You're probably going to have to use a media player plugin. Try LeanBack Player:
http://leanbackplayer.com/ + http://leanbackplayer.com/player_extensions.html (XSPF Audio Playlist extension)
It's HTML5/CSS/JS with a Flash fallback option so you should be able to style it to suit your needs easily enough.