jQuery toggle video mute for single video - javascript

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>

Related

Random video play code on homepage suddenly stopped working

I'm in charge of maintaining the website of a small foundation dedicated to video art.
On the homepage we used to have a few videos playing randomly when the user clicked on play.
But suddenly a while back it stopped working , the videos won't load on Chrome /Edge /Vivaldi while on Firefox it plays only the last video in the list ...
<div class="videosaccueil">
<section id="videos">
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video1.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video2.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video3.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video4.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video5.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video6.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video7.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video8.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video9.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video10.mp4"></video>
</section> <script><br />
(function () {<br />
"use strict";<br />
var videosSection = document.getElementById("videos");<br />
var videosSectionClone = videosSection.cloneNode();<br />
var videos = videosSection.getElementsByTagName("video");<br />
var randomVideo = videos.item(Math.floor(Math.random() * videos.length)).cloneNode(true);<br />
randomVideo.setAttribute("preload", "auto");<br />
videosSectionClone.appendChild(randomVideo);<br />
videosSection.parentNode.replaceChild(videosSectionClone, videosSection);<br />
randomVideo.play();<br />
})();<br />
</script>
</div>
I wasn't the one that made the random play code and I'm not practical enough to understand what went wrong so It would be really nice if someone can indicate to me how to fix the code if it's possible .
Thank you very much for your help .

How to get .load() working within .each() loop?

I'm modifying a bit of code I found here from this question.
I am trying to get it working now for multiple instances of a video. This is the only way I can get it working but I would like to make it work for each instance that there is a video which changes on each page this applies on.
$( function() {
const bgv = $('.bgvid');
$('source', bgv).each(function() {
const el = $(this);
el.attr('src', el.data('src'));
});
bgv[0].load();
bgv[1].load();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
<source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>
<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
<source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>
I have tried putting it within a loop like this instead of the bgv[0].load(); but it didn't work:
$('.bgvid').each(function(){
$(this).load();
});
Just call this.load(), don't convert the DOM element into a jQuery element.
$( function() {
const bgv = $('.bgvid');
$('source', bgv).each(function() {
const el = $(this);
el.attr('src', el.data('src'));
});
bgv.each(function() {
this.load();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
<source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>
<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
<source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>

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')">

Create a buffering video on seek, pause or play

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", "");
})
})
});

Categories

Resources