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>

Jquery function that toggles div and changes the atrribute source

I have edited this question to better explain what I am trying to do.
I have a page that has a menu div on the side of a page, in this div the menu items are dynamically created from a database, this allows me to show a video as a thumbnail image by disabling the video controls. So the src attribute is dynamically created and generated in the menu video. When a click event is actioned on the video menu button the source from the button needs to be passed to the video player source attribute so the chosen video plays in the video player.
Initially I looked at toggling the div using the button then using an onload or load event to do this exchange of source code, but I don't think that was the way to go, so this is the code I have that creates the video button dynamically
Video button
<video id="<?php echo $vidID ?>" class="vidContainer">
<source id="vidLink" class="vidLink" src="<?php echo $vidUrl ?>" type="video/ogg">
Your browser does not support the HTML5 tags.
</video>
I tried the addition of the following to get the src from the button to pass into the video player div
Modified code
<video id="<?php echo $vidID ?>" class="vidContainer" onClick="document.getElementById('vidiframeweap').getElementsByTagname('source')[0].getAttribute('src')">
<source id="vidLink" class="vidLink" src="<?php echo $vidUrl ?>" type="video/ogg">
Your browser does not support the HTML5 tags.
</video>
<div class="vidText"><?php echo $vidName ?></div>
This is the video player div with the video tags within which is where I'd like to put the src code from the button
Video div code
<div id="vidiframeweap" class="vidiframeweap">
<video id="player" class="player" preload="auto" controls>
<source id="playermp4" src="" type="video/mp4">
<source id="playerogg" src="" type="video/ogg">
</video>
</div>
I hope I have provided a better explanation of what im trying to achieve and if anyone can help me to figure out the best way to do this I would be most greatful

The ID of element used is wrong I think, it is playermp4 so use like this:
$('#playermp4').attr('src','http://www.dot-mov.com/uploadedVideo/testing3/EditBike3.ogv');

Slight modification has to be done here! You need to change the attribute of source or video
$('#vidLink').on('click',function(){
$('#player').toggle();
$('#player source').attr('src','http://www.dot-mov.com/uploadedVideo/testing3/EditBike3.ogv');
$("#player")[0].load(); //If it doesn't play
});
});
EDIT
Add a data-* attribute to your button #vidLink like data-source and try fetching the source as below:
$('#vidLink').on('click',function(){
$('#player').toggle();
var sourc=$(this).data('source');
$('#player source').attr('src',sourc);
$("#player").load();
$("#player").play();
});
});

HTML5 video autoplay and autostop when specific class on it

I have an slider of videos, I want to autoplay when visible and autostop when not visible. The visible video at the moment of stay visible has a class (active) that identifies it.
<video class="item active" controls autoplay poster="" width="640" height="360">
<video class="item" controls autoplay poster="" width="640" height="360">
<video class="item" controls autoplay poster="" width="640" height="360">
How can I do that?

You can manipulate the states of video with javascript.
For playing for example you can select the video tag that have class active and play it:
document.querySelector('video.active').play();
For any other video tags you can just pause them with this code:
var videos = document.querySelectorAll('video.item');
for(var i = 0; i < videos.length; i++) {
videos[i].pause();
}
You will need to make this manipulation on click, or on slide change, and also take note that first you will need to stop all videos then just play the video with active class.

I trigger the events on my slider when translates an initialize a slide an then execute these functions:
When translate:
function(){
$('.item').find('video').each(function(){
this.pause();
});
When initialize a new slide (to automatically play it):
function(){
$('.active').find('video').each(function(){
this.play();
});
That solved my problem.

Try this:
$("video").prop("volume", 0.3).click(function() {
this[this.paused ? "play" : "pause"]()
});

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();
});