Unable to Mute HTML5 video using jQuery attr - javascript

Trying to mute video using attr but it doesn't work.
HTML
<video autoplay muted class='preview-video'>
<source src='file.mp4' type='video/mp4'>
</video>
jQuery
function volumeToggle(button) {
var muted = $(".preview-video").attr("muted");
$(".preview-video").attr("muted", !muted)
}
However, when I try prop() instead of attr() it works. Can someone explain in detail the reason behind it?

You need to toggle the muted property of the video element, not the attribute. Try this:
let $vid = $('.preview-video');
$('button').on('click', function() {
$vid.prop('muted', (i, m) => !m);
});
video {
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Toggle Mute</button>
<video autoplay muted class='preview-video'>
<source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

Related

property 'play' of undefined

I hope you're very well.
on my website I have a video player I want the video to be paused when I scroll
html:
<video id="video_home" class="embed-responsive-item" loop="loop" playsinline="playsinline" autoplay="autoplay" class="vimeo-video" controls>
<source src="img/video-home-rcn.mp4" type="video/mp4" />
<source src="img/video-home-rcn.mp4" type="video/webm" />
<source src="img/video-home-rcn.mp4" type="video/ogg" />
</video>
jquery:
var myvid = $('#video_home')[0];
$(window).scroll(function(){
var scroll = $(this).scrollTop();
scroll > 500 ? myvid.pause() : myvid.play();
})
link:
https://html.canalrcn.com/CanalRCN/react/index-new-v2.html
usually you must do all jQuery searches after DOC ready,
var myvid; $(document).ready(function() {
myvid = $('#video_home')[0];
})
or shorthand version
$(funtion() { myvid = $('#video_home')[0]; })
IF that doesn't work use the javascript debugger in your browser to see if jQuery is finding your target OK.
After checking the link i got this that you need to change to var myvid = $('#video_home')[0]; to var myvid = $('.embed-responsive-item')[0]; as your video has not any id. It has class embed-responsive-item if you want to use id then add that in video tag.

Display elements only when player is paused

I want try to display some information inside div content when player is paused, but problem is because this is displayed when player is paused and when is seeked.
I have create example:
var video = $('#video')[0];
video.addEventListener("playing", function() {
$('.text').text('playing');
});
video.addEventListener("pause", function() {
$('.text').text('pause');
});
video {
width:300px;
height:150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">test</div>
<video id="video" controls>
<source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>
If you seeking you will see that player is change event to pause. Can't find solution to display something only when player is paused. Any idea?
You can add another event listener for seeking using the WebEvent seeking which is fired when a seek operation began.
Check the Code Snippet below for a practical example of using the seeking event.
var video = $('#video')[0];
video.addEventListener("playing", function() {
$('.text').text('playing');
});
video.addEventListener("pause", function() {
$('.text').text('pause');
});
video.addEventListener("seeking", function() {
$('.text').text('seeking');
});
video {
width:300px;
height:150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">test</div>
<video id="video" controls>
<source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

success change source & track of video use onclick button, but the video still same

Before i start, i'm sorry if i belong is repost. But, i still not get the answer after check the previous thread.
i try to change source of video with onclick button. But, the video still same although the source has changed.
<video width="560" height="320" controls="controls" preload="none">
<source id="myVideo" src="/video1.mp4" type="video/mp4">
<track id="mySubtitle" src="/Subtitle1.srt" kind="subtitles" srclang="id" label="Indonesian" default>
</video>
<button onclick="myFunction1()">Change Video 1</button>
<button onclick="myFunction2()">Change Video 2</button>
<script>
function myFunction1() {
document.getElementById("myVideo").src = "/video2.mp4";
document.getElementById("mySubtitle").src = "/Subtitle2.srt";
}
function myFunction2() {
document.getElementById("myVideo").src = "/video3.mp4";
document.getElementById("mySubtitle").src = "/Subtitle3.srt";
}
</script>
The source has success changed, but video still same.
Anyone have an idea?
Try this:
<script>
function myFunction1() {
document.getElementById("myVideo").setAttribute("src", "/video2.mp4");//Set src attribute
document.getElementById("mySubtitle").setAttribute("src", "/Subtitle2.srt");//Here too
}
function myFunction2() {
document.getElementById("myVideo").setAttribute("src", "/video3.mp4");//And here
document.getElementById("mySubtitle").setAttribute("src", "/Subtitle3.srt");//Same
}
</script>
This should work perfectly.
When you change the src of the <source> element, it doesn't change the src of the <video> element. You have to call its load method :
function myFunction1() {
document.getElementById("myVideo").src = "http://media.w3.org/2010/05/bunny/movie.mp4";
// document.getElementById("mySubtitle").src = "/Subtitle2.srt";
document.querySelector('video').load();
}
<button onclick="myFunction1()">Change Video 1</button>
<video width="560" height="320" controls="controls" preload="none">
<source id="myVideo" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
<!--<track id="mySubtitle" src="/Subtitle1.srt" kind="subtitles" srclang="id" label="Indonesian" default>-->
</video>

Detecting end of video with jQuery

I have three videos that I am trying to detect when they end, and then navigate to another page.
The function seems to only work for the first video $vid1 and nothing happens to the $vid2 and $vid3 videos.
I came across this question, and sourced my code from there.
(I noticed in a comment that it stated that the 'correct' answer doesn't work in chrome)
How would I go about making this work for all videos?
JS
//variables
var $vid1 = document.getElementById("vid1");
var $vid2 = document.getElementById("vid2");
var $vid3 = document.getElementById("vid3");
//functions
function Redirect1() {
window.location.replace('ExamplePage1');
}
function Redirect2() {
window.location.replace('ExamplePage2');
}
function Redirect3() {
window.location.replace('ExamplePage3');
}
//events
$vid1.addEventListener("ended", Redirect1, false);
$vid2.addEventListener("ended", Redirect2, false);
$vid3.addEventListener("ended", Redirect3, false);
HTML
<div class="videoResult vidOne">
<video id="vid1" controls>
<source src="#" type="video/mp4">
</video>
</div>
<div class="videoResult vidTwo">
<video id="vid2" controls>
<source src="#" type="video/mp4">
</video>
</div>
<div class="videoResult vidThree">
<video id="vid3" controls>
<source src="#" type="video/mp4">
</video>
</div>
May be, try this?
//functions
function Redirect1() {
window.location.replace('./ExamplePage1');
}
function Redirect2() {
window.location.replace('./ExamplePage2');
}
function Redirect2() {
window.location.replace('./ExamplePage3');
}

Using event listening wait for readyState html5 video

Here is my javascript on loading of video.
var vid = $("#video");
$("#video").on("load",function() {
if ( vid[0].ReadyState === 4 ) {
console.log("loaded video!");
console.log(vid);
vid.fadeIn();
}
});
I want to play my video everytime the video div refreshes after .load() runs. How do i loop this until readyState == 4? I tried using on("canplaythrough") but this is never recognized as a function...
Make sure you set preload="auto" (and don't use autoplay) in the tag, then you can use the canplay event:
var vid = $("#video");
vid.on("canplay", function() {
vid[0].play();
vid.fadeIn(1000);
});
$("#change").on("click", function() {
vid.hide();
vid[0].src = "http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="video" width="500" height="280" preload="auto" style="display:none">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
</video>
<button id="change">Change source (mp4 only for this example)</button>

Categories