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

how to play sound on a href click and mouseover

This is my header:
I want to add sound affect twice:
on mouseover on a href from (innerlinks)
on click on href from (innerlinks)
I want a different sound onclick and onmouseover.
what is the best way?
thanks!
<div id="HoverHeader">
<div id="SiteHeader">
<div id="MainNav">
<div id="btnNav"><img src="../../../000Frames/site/images/menu-bt.png" alt="menu"/></div>
<uc1:mainNav ID="mainNav1" runat="server" />
<div id="InnerLinks">
תיק עבודות
לקוחותינו
אודותנו
צור קשר
</div>
</div>
</div>
</div>

You can add couple audio tags on page and play them as described in this article - Play Sound on :hover | CSS-Tricks.
<audio>
<source src="audio/beep.mp3"></source>
<source src="audio/beep.ogg"></source>
Your browser isn't invited for super fun audio time.
</audio>
<script>
var audio = $("#mySoundClip")[0];
$("nav a").mouseenter(function() {
audio.play();
});
</script>

That needs JavaScript and an audio tag. This is from http://css-tricks.com/play-sound-on-hover/
For hover sound:
<audio id="hover">
<source src="audio/hover.mp3"></source>
<source src="audio/hover.ogg"></source>
Your browser isn't invited for super fun audio time.
</audio>
var hover = $("#hover")[0];
$(".InnerLinks a").mouseenter(function() {
hover.play();
});
For click sound:
<audio id="click">
<source src="audio/click.mp3"></source>
<source src="audio/click.ogg"></source>
Your browser isn't invited for super fun audio time.
</audio>
var click = $("#click")[0];
$(".InnerLinks a").click(function() {
click.play();
});
Demos at CSS Tricks

HTML 5 Video playstate overlay

I have a special requirement with html5 <video>, I hope, you guys can help me out.
Is it possible to add a <div>,<p> or something above the html5 <video> object?
Plus Trigger the PlayState of the Video and hide it, and show it after the video is stopped?
This is the Poster:
eg:
<video width="280" height="158" poster="img/thumb.png" controls>
<source src="TestVideo1.mp4" type="video/mp4">
Get a new Browser my friend
<h1>Title</h1>
<p>Some Description</p>
</video>
And is should look like this
Is there any possible way to do this?
Thank You
Note:
I have read this post Overlaying a DIV On Top Of HTML 5 Video but it didn't helped.
Images:
Poster
http://i.stack.imgur.com/vA1zn.png
It should be like this:
http://i.stack.imgur.com/qsZaI.png

You are going to have to use a combination of the canvas tag and javascript to get what you want.
Try taking a look at these two articles for a start:
video + canvas = magic
Using CSS3 and Jquery to create a custom HTML5 Player

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