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>

Why is my javascript requiring 2 clicks instead of 1?

I'm using the following JS code to play an HTML5 custom video and - at the same time - activating an iframe, that will be launched just 27 seconds after the play video button is clicked.
But, I'm experiencing 2 issues:
The play button is requiring 2 clicks to start the video, instead of
just 1
The iframe is randomly activated even when the play video button
isn't clicked (between 25 and 40 seconds after the page is loaded,
randomly)
Any idea why?
<script type="text/javascript">window.onclick=function() {
setTimeout('document.getElementById("dwayne").style.display="block"',27000);
setTimeout('document.getElementById("blackrussian").style.display="inline"',27000);
var video=document.getElementById("167868028");
var playButton=document.getElementById("play-pause");
playButton.addEventListener("click",function(){if(video.paused==true){video.play();
playButton.innerHTML=" ";}else{video.pause();
playButton.innerHTML=" ";}});
}</script>
Here's the html part:
<video class="video-js" id="167868028" preload="false" width="910" height="510" poster="img/snapshot.jpg" data-setup="{}">
<source src="video/vid.mp4" type="video/mp4"></video>
<div class="controls"><button type="button" id="play-pause" class="play"><img src="img/play.png"></button></div>
<iframe id="dwayne" class="whiterussian" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" src="files/iframe.php"></iframe>
<div id="blackrussian"></div>

You've got the playButton.addEventListener nested inside the window.onclick, could be that's what's causing the two-click requirement.
And the setTimeout is inside window.click but not inside playButton.addEventListener("click"..., meaning clicking the button will not fire it, but clicking the window will, (after 27 seconds).
window.onload=function() {
var video=document.getElementById("167868028");
var playButton=document.getElementById("play-pause");
playButton.addEventListener("click", function()
{
setTimeout('document.getElementById("dwayne").style.display="block"',27000);
setTimeout('document.getElementById("blackrussian").style.display="inline"',27000);
if(video.paused==true){
video.play();
playButton.innerHTML=" ";
}else{
video.pause();
playButton.innerHTML=" ";
}
});
}
Haven't tested the code but it should work...

Based on your query, here the simplest way to make it works.
When clicking one time anywhere on the page, the video will start. Then 27 seconds later, the iframe receive a new src url, and then load.
window.onclick=function() {
document.getElementById("167868028").play()
setTimeout(loadFrame, 27000)
}
function loadFrame(){
document.getElementById("dwayne").src = "http://arunranga.com/examples/access-control/"
}
<video id="167868028" width="91" height="51" poster="img/snapshot.jpg">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<iframe id="dwayne" frameborder="3" src="" scrolling="yes"></iframe>

How can I let the video start playing at particular position?

I'd like to set up the button. Then if I hit that, the video will be starting at the position 30 secs elapsed. How can I code that?
My current code is just like this
<video id="video" controls="controls" autoplay="autoplay" name="media"><source src="video.mp4" type="video/mp4"></video>
<button name="test" onclick="alert(Math.floor(document.getElementById('video').currentTime) + ' secs elapsed!');">How much time has already elapsed?</button>

You can seek to a particular section of the HTML5 Video using its currentTime property:
JavaScript:
document.getElementsByName('test')[0].onclick = function () {
document.getElementById('video').currentTime = 120; // seeks to the 2nd minute
}

On click play a section of a mp3

I have many buttons playing many different sounds - each button plays a different mp3 when clicked. Example code:
<a onclick="this.firstChild.play()"><audio src="1.mp3" ></audio>1</a>
For mobile devices I am trying to play all the different sounds from the same mp3 file, so I can preload 1 file and have more instant experience.
So I would need to set the starting point and end point of the mp3 to be played when clicked.
How do I do that using audio html5 or javascript? Working in just chrome is enough...

If i got your question right, you want to play different time stamp of a audio file simultaneously or whenever you want
here is one example which you can use
<a onclick="this.firstChild.play()"><audio id="audio2"
preload="auto"
src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t=00:00:00"
>
</audio>Part 1
</a>
<a onclick="this.firstChild.play()"><audio id="audio2"
preload="auto"
src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t=00:00:56" >
</audio>Part 2
</a>
<a onclick="this.firstChild.play()"><audio id="audio2"
preload="auto"
src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t=00:01:00" >
</audio>Part 3
</a>
you can also give time in seconds instead of timestamp like
<a onclick="this.firstChild.play()"><audio id="audio2"
preload="auto"
src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t=0"
>
</audio>Part 1
</a>
<a onclick="this.firstChild.play()"><audio id="audio2"
preload="auto"
src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t=56" >
</audio>Part 2
</a>
<a onclick="this.firstChild.play()"><audio id="audio2"
preload="auto"
src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t60" >
</audio>Part 3
</a>

I haven't tested this code, but this should work:
<a id="audioTag1"><audio src="1.mp3" ></audio>1</a>
var canPlay = false;
var audio = document.getElementsByTagName('audio')[0];
document.getElementById('audioTag1').addEventListener('click', function(){
playAudio(15);
});
audio.addEventListener('canplay', function() { // listen for the `canplay`event, to make sure the file is loaded.
canPlay = true; // Set a boolean to "true" once the audio has loaded.
});
function playAudio(time){
audio.currentTime = time; // jump to 15 secs into the file
audio.play(); // I'm not certain if this line is necessary.
}
Make sure you run the JS code in a onload event listener, so the audio tag is loaded when the code is executed.

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.