Create a buffering video on seek, pause or play - javascript

I want to create a buffer gif when user seeks, play or pause the video. I am able to succeed a bit but I can'f figure out how to do this on seek. This is my code.
HTML:
<div class="row text-center">
<video width="320" height="240" controls id="video1" onplay="buffer(this.id)" poster="" class="">
<source src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<br/>
<div class="row text-center">
<video width="320" height="240" controls id="video2" onplay="buffer(this.id)" poster="" class="">
<source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
CSS:
video.loading {
background: black url("img/loader_old.gif") center center no-repeat;
z-index: 300000 !important;
}
JQUERY:
function buffer(id){
$('#'+id).on('loadstart', function (event) {
$(this).addClass('loading');
});
$('#'+id).on('canplay', function (event) {
$(this).removeClass('loading');
$(this).attr('poster', '');
});
}

You can set the value of poster attribute to .gif at html, remove value at canplay event, where you call $(this).attr('poster', '');
<div class="row text-center">
<video width="320" height="240" controls id="video1" poster="img/loader_old.gif" class="">
<source src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<br/>
<div class="row text-center">
<video width="320" height="240" controls id="video2" poster="img/loader_old.gif" class="">
<source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
$(function() {
$("video").each(function() {
$(this).on("canplay", function (event) {
$(this).attr("poster", "");
})
})
});

Related

jQuery toggle video mute for single video

I found the following code on codepen
The toggle works, but only for one single video (or lets say, it works for every video on the page, not for one specific video).
Can I somehow but the mute button and the video together in a wrapper to make the button only function inside this wrapper? I think $this would be the way to do it, but I'm not sure how to use it correctly here.
$("video").prop('muted', true);
$("#mute-video").click(function() {
if ($("video").prop('muted')) {
$("video").prop('muted', false);
} else {
$("video").prop('muted', true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<button id="mute-video">Toggle Mute</button>
<video controls class="my_video">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
</div>
<div class="wrapper">
<button id="mute-video">Toggle Mute</button>
<video controls class="my_video">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
</div>
<div class="wrapper">
<button id="mute-video">Toggle Mute</button>
<video controls class="my_video">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
</div>
You have to find the relevant video element against the mute button.
You can use .next on the currentTarget.
Also, id of DOM elements should be unique, so I have changed the mute-video button id to class -
$("video").prop('muted', true);
$(".mute-video").click((e) => {
const video = $(e.currentTarget).next('.my_video');
const muted = video.prop('muted');
video.prop('muted', !muted);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<button class="mute-video">Toggle Mute</button>
<video controls class="my_video">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
</div>
<div class="wrapper">
<button class="mute-video">Toggle Mute</button>
<video controls class="my_video">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
</div>
<div class="wrapper">
<button class="mute-video">Toggle Mute</button>
<video controls class="my_video">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
</div>

I have list of videos I want to play only one video in popup modal

I have list of videos and I want videos to play only when I click the thumbnail.
<video style="min-width: 100%; min-height: 100%; " id="vid" width="auto" height="auto" controls autoplay="true" loop="loop" preload="auto" muted="muted">
<source src="video/sample.mp4" type="video/mp4">
<source src="video/sample.ogg" type="video/ogg">
</video>
<div id="divVideo">
<video id="MyVideo" style="min-width: 100%; min-height: 100%; " id="vid" width="auto" height="auto" controls autoplay="true" loop="loop" preload="auto" muted="muted">
<source src="video/sample.mp4" type="video/mp4">
</video>
</div>
Then write a javascript function to load different videos
function changeVideo(source){
var $video=$("#MyVideo")[0];
$("#MyVideo source").attr('src', source);
$video.load();
$video.play();
}
suppose you have 3 thumbnails as
<img class="thumbnail" data-url="source1" src="img1"/>
<img class="thumbnail" data-url="source2" src="img2"/>
<img class="thumbnail" data-url="source3" src="img3"/>
in document ready,
write function
$(".thumbnail").click(function(){
changeVideo($(this).attr("data-url"));
});
FOr showing in a modal pop up just make use of bootstrap modal pop up
https://www.w3schools.com/bootstrap/bootstrap_modal.asp
in that to load video into the pop up use
$(".modal-body").html($("#divVideo").html());
after this write the command to show pop up
$("#MyModal").show()

Get an overlay or placeholder on pause using autoplay on Hover HTML Video

I have a question please I got an HTML playing video on hover but once I go away with the mouse I got a hide video function, what I try to do is once I leave the mouse from the playing video to show the placeholder image again something like an Overlay on top of the video. I hope someone can please help me with this.
Here is a live example of the code https://jsfiddle.net/the_nexi/514pwkeo/2/
Thanks in advance
$(document).ready(function() {
$('.video').each(function(i, obj) {
$(this).on("mouseover", function() { hoverVideo(i); });
$(this).on("mouseout", function() { hideVideo(i); });
});
});
function hoverVideo(i) {
$('.thevideo')[i].play();
}
function hideVideo(i) {
$('.thevideo')[i].currentTime = 0;
$('.thevideo')[i].pause();
}
*{font-family: sans-serif}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>If you hover over this Thumbnail the Video will start but once you move the mouse away from the image the Thumbnail (Poster) should appear again with an Overlay this is what I try to do.</p>
<div class="video">
<video class="thevideo" loop muted preload="auto" poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
$(document).ready(function() {
$('.video').each(function(i, obj) {
$(this).on("mouseover", hoverVideo);
$(this).on("mouseout", hideVideo);
});
});
function hoverVideo() {
$(this).find(".overlayImage").hide();
$(this).find(".thevideo")[0].play();
}
function hideVideo(video) {
$(this).find(".thevideo")[0].currentTime = 0;
$(this).find(".thevideo")[0].pause();
$(this).find(".overlayImage").show();
}
* {
font-family: sans-serif
}
.video {
position: relative;
width: 320px;
}
.overlayImage {
position: absolute;
}
<div class="video">
<img src="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<div class="video">
<img src="http://hdwarena.com/wp-content/uploads/2017/04/Beautiful-Wallpaper.jpg" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<div class="video">
<img src="https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/rWaXO67Bipm9mgo7/videoblocks-4k-footage-disco-lights-as-an-abstract-colored-animated-background-or-wallpaper-light-leaks_sl5jole0z_thumbnail-small01.jpg" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<div class="video">
<img src="https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/BxWKHw2nWj8nx9c2x/videoblocks-red-wallpaper-slider_rxlvi6ltb_thumbnail-small11.jpg" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
In this, every video is separate from each other, allow me to explain why:
I changed the way you set the functions for the events mouseover and mouseout and now they are event functions.
Inside the functions hoverVideo() and hideVideo(), we hide the image and play the video using $(this) which is passed through the $.on() as the correspondent video div and find the elements (video and image) with $.find().
Optional: I added the width:320px in the css because it was somewhat annoying that it continued playing the video outside of the video because of the bigger width.
If you want you can get rid of the class tags, and use the $.find() function like this, for example:
$(this).find("video")[0].currentTime = 0;
$(this).find("video")[0].pause();
$(this).find("img").show();
In this way it will find every video element inside the div with the .video class and do the rest from there, the same for img.
I hope this code helps you.
$(document).ready(function() {
$('.video').each(function(i, obj) {
$(this).on("mouseover", function() { hoverVideo(i); $(this).find(".overlayImage").hide(); });
$(this).on("mouseout", function() { hideVideo(i); $(this).find(".overlayImage").show(); });
});
});
function hoverVideo(i) {
$('.thevideo')[i].play();
}
function hideVideo(i) {
$('.thevideo')[i].currentTime = 0;
$('.thevideo')[i].pause();
}
*{font-family: sans-serif}
.video {
position:relative;
}
.overlayImage {
position:absolute;
}
<div class="video">
<img src="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
I hope this updated code help you

Firefox bug - video does not mute when it is cloned with jQuery?

Firefox does not mute the video when the video element is cloned with jQuery.
JS:
$( document ).ready(function() {
var origin = $('.item-video');
var target = $('.clone');
origin.clone(true).appendTo(target);
origin.empty();fix
});
HTML:
<div class="item-video">
<video width="560" height="315" autoplay muted controls loop>
<source src="big-buck-bunny_trailer.webm" type="video/webm">
<!-- <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm"> -->
</video>
</div>
<div class="clone">
</div><div class="item-video">
<video width="560" height="315" autoplay muted controls loop>
<source src="big-buck-bunny_trailer.webm" type="video/webm">
<!-- <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm"> -->
</video>
</div>
<div class="clone">
</div>
jsfiddle
Any ideas how I can fix the bug on Firefox?
I don't know why this is happening on FF but this is the workaround
origin.clone(true).appendTo(target).find('video').attr('onloadedmetadata','this.muted =true');

JavaScript Play Button 1 Starts Video for Play Button 2

I am making a webpage that has two videos on it. I want each video to play when its poster image is clicked on. To do this, I added the script below to each video, and changed the id for each to "video1" and "video2".For some reason both videos play and stop the second video. I can't see why. Below is my code:
HTML
<div class="fade">
<button onclick="playPause()">
<video id="video1" width="350px" height="250" poster="images/video-
poster-2.jpg" controls>
<source src="videos/pup-head-lite-video.mp4" type="video/mp4">
<source src="videos/pup-head-lite-video.webmhd.webm" type="video/webm">
Your browser does not support this video.
</video>
</div>
<br/>
<br/>
<div class="fade">
<button onclick="playPause()">
<video id="video2" width="350px" height="250" poster="images/video-
poster.jpg" controls>
<source src="videos/original-portable-dog-potty.mp4" type="video/mp4">
<source src="videos/original-portable-dog-potty.webm"
type="video/webm">
Your browser does not support this video.
</video>
</div>
SCRIPTS
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>
<script>
var myVideo=document.getElementById("video2");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>`
NEW CODE
<div class="fade">
<button onclick="playPause('video1')">
<video id="video1" width="350px" height="250"
poster="images/video-poster-2.jpg" controls>
<source src="videos/pup-head-lite-video.mp4"
type="video/mp4">
<source src="videos/pup-head-lite-video.webmhd.webm"
type="video/webm">
Your browser does not support this video.
</video>
</div>
<br/>
<br/>
<div class="fade">
<button onclick="playPause('video2')">
<video id="video2" width="350px" height="250"
poster="images/video-poster.jpg" controls>
<source src="videos/original-portable-dog-potty.mp4"
type="video/mp4">
<source src="videos/original-portable-dog-potty.webm"
type="video/webm">
Your browser does not support this video.
</video>
</div>
</div>
<script>
function playPause(video)
var myVideo=document.getElementById("video");
{
if (myVideo.paused)
myVideo.play();
}else
myVideo.pause();
}
}
</script>
You're having issues because you are using the same variable to refer to the video in both cases. You repeated yourself a little bit in your code, so I tried to cut out those bits. Let me know if you have any issues.
<div class="fade">
<button onclick="playPause('video1')">
<video id="video1" width="350px" height="250" poster="images/video-
poster-2.jpg" controls>
<source src="videos/pup-head-lite-video.mp4" type="video/mp4">
<source src="videos/pup-head-lite-video.webmhd.webm" type="video/webm">
Your browser does not support this video.
</video>
</div>
<br/>
<br/>
<div class="fade">
<button onclick="playPause('video2')">
<video id="video2" width="350px" height="250" poster="images/video-
poster.jpg" controls>
<source src="videos/original-portable-dog-potty.mp4" type="video/mp4">
<source src="videos/original-portable-dog-potty.webm"
type="video/webm">
Your browser does not support this video.
</video>
</div>
<script>
function playPause(video)
{
var myVideo=document.getElementById(video);
if (myVideo.paused) {
myVideo.play();
} else {
myVideo.pause();
}
// you could consolidate the above if/else to be:
// myVideo.paused ? myVideo.play() : myVideo.pause();
}
</script>
Your problem comes from the fact that you use the same names for everything:
<script>
var myVideo=document.getElementById("video1"); // Creates variable myVideo
function playPause() // Creates a function called playPause
{
// Plays or pauses "myVideo"
}
</script>
<script>
var myVideo=document.getElementById("video2"); // Overrides the value of "myVideo" to point to video2 instead
function playPause()
{
// Plays or pauses "myVideo"
}
</script>
So when you actually call playPause, myVideo has always been set to point to video2.
I suggest that you pass the ID of the video you want to play or pause when you call playPause, and that you only define playPause once - that second definition is totally redundant, since it's the exact same code.
function playPause(videoId) {
var myVideo=document.getElementById(videoId);
if (myVideo.paused) {
myVideo.play();
} else {
myVideo.pause();
}
}
Then your buttons can be rewritten to be
<button onclick="playPause('video1')">
<button onclick="playPause('video2')">

Categories

Resources