I am showing a couple a number of videos in succession.
When the first video finishes I ask the user a question and then show another video following their response. After the second video I ask the user a final question.
The problem is that when the second video ends both .question-one and .question-two are displayed as a block again, as it appears the code from the first on('ended..) method is being triggered again.
I tried to use unbind to remove the binding from the videos, but this didn't work.
Here is my code below.
HTML
<video>
<source src="1.mp4" type="video/mp4">
</video>
JS
$('.video-one').bind('ended',function(){
$(this).removeClass('video-one');
$(this).addClass('video-two');
$('#video-background').css('display', 'none');
$('.question-one').fadeIn('slow');
$('.video-one').unbind('ended');
});
$('.question-one').click(function(){
$('.question-one').css('display', 'none');
$('#video-background').css('display', 'block');
$('video').attr('src', '2.mp4');
});
$('.video-two').bind('ended',function(){
$(this).removeClass('video-two');
$(this).addClass('video-three');
$('#video-background').css('display', 'none');
$('.question-two').fadeIn('slow');
$('.video-two').unbind('ended');
});
Is there something else that I am missing?
instead of changing order of instructions like #Offbeatmammal said, I would suggest unbinding event based on ID of element, because you want to unbind only this one, specific - not everyone with this class probably. it's only semantic reason. you would then have to add an event parameter to your function, and get id by event.target.id if I remember well.
Related
I have a page with multiple HTML5 videos on it. For each video, there is a "poster" image that sits on top of the video. When someone clicks the poster image, the image disappears via CSS, and the video below it plays.
My problem is that I can only get the FIRST video on the page to play when someone clicks it. I'd like the user to be able to click any of the videos on the page to play them. My guess is that I somehow need to incorporate the "each()" function into the jQuery code.
Here is my current jQuery code:
$('#videocover').click(function() {
var video = $('#wp_mep_1').get(0);
video.play();
$(this).css('visibility', 'hidden');
return false;
});
Below is a JSFiddle with multiple videos on the page, but only the first one working when you click it. Feel free to play around:
https://jsfiddle.net/rtkarpeles/ammebd3k/3/
Thanks in advance for any and all help you can provide!
You cannot have multiple elements with same ID. Change them to class.
Change the video-container from ID to class and videocover as well.
<div class="video-container">
<video>...</video>
<div class="videocover"></div>
</div>
With the above structure the below script should work fine.
$('.videocover').click(function () {
var video = $(this).closest('.video-container').find('video')[0];
video.play();
$(this).css('visibility', 'hidden');
return false;
});
.closest() will fetch the first match when traversing through ancestors in DOM
Here is a demo https://jsfiddle.net/dhirajbodicherla/ammebd3k/5/
Change your IDs to classes.
https://jsfiddle.net/ammebd3k/6/
.videocover and .wmp_mep_1
IDs must be unique on a page, or else you run into exactly your issue.
I am trying to use jQuery to dynamically assign listeners to anchors to play sound on mousedown and pause on mouseup. Here's my html:
<p>Meet
<a class="easter-egg">Buck
<audio class="egg-aud" src="file.mp3">
<source src="file.ogg" />
</audio>
<img class="egg-img" alt="" src="file.jpg" />
</a>.
</p>
And my js:
$( "a.easter-egg" ).mousedown( function() {
$( this ).find( "audio.egg-aud" )[0].play();
});
$( "a.easter-egg" ).mouseup( function() {
var audio = $( this ).find( "audio.egg-aud" )[0];
audio.pause();
audio.currentTime = 0;
});
EDIT: In jsfiddle my code works perfectly until I wrap the <p> in a <div class="entry-content">, at which point it breaks. I pasted a sample of my website into jsfiddle, where you can try deleting the div and see that it works without it.
Problem:
You were trying to set currentTime of audio tag that has been appended dynamically. Thus, you have to wait for audio tag to be ready to play.
Solution:
Check whether the audio element is ready to be played using the canplay event.
// When the audio element "can"be"play"ed, fire the function.
audio.addEventListener("canplay", function() {
this.currentTime = 0;
},true);
Comments:
Previously, the error you had been getting in the console was:
"Error: An attempt was made to use an object that is not, or is no longer, usable."
Do keep checking the errors, they are very useful :)
The same thing applies for <video> tags that have been appended dynamically.
Live Demo
Hope that helps !
Aaaaand right after I went to bed I realized the problem. I recently wrote a script that changes the text of each instance of an author's name into a link to their list of posts. To do this it replaces the contents of each p element with a new string, which means it recreates the anchors and audios that I'm working with. So ill i guess ill just have to make sure that happens first.
I want to pause the video being played at a particular instant till a question that pops up has been answered. The user should not be able to go ahead and forward the video till a particular question that has just poppped up has been answered.
So I can pause the video using JS at that particular instant. How can I ensure the video's controls are unlocked or the video plays again only after answering the question that pops up?
look at this demo http://jsfiddle.net/dgLds/58/
var video = document.getElementById("myvideo");
function toggleControls() {
document.getElementById('myvideo').pause();
if (video.hasAttribute("controls")) {
video.removeAttribute("controls")
} else {
video.setAttribute("controls","controls")
}
}
<video id="myvideo">
<source src="http://www.w3schools.com/html5/movie.mp4" />
</video>
<p onclick="toggleControls();">Toggle</p>
instead of on click you can call the function when ever you want
Here is a opera article on everything you wish to know about html5 video http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
Specifically look at How to keep things synchronized section
EDIT: I you want to disable right-click options. Just go ahead and disable right click on that tag/id
Here is a jquery code
$('video').bind('contextmenu', function()
{
alert('no right click.');
return false;
});
I ran into the need to be able to disable the context menu myself today because we have our own custom controls. You can do this fairly easily:
video.addEventListener('contextmenu', function(e) {
e.preventDefault();
return false;
});
He is an example built upon Web Developer's demo: http://jsfiddle.net/dgLds/308/
There is a pause() method available for the video element:
document.getElementById('myVideo').pause();
Similarly, there is play().
i habe a normal video tag like this one:
<object id='AtriumMediaVideo' width='936' height='576' style='z-index: 1;' classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95'" type='application/x-oleobject'... > <embed type='application/x-mplayer2' pluginspage='http://microsoft.com/windows/mediaplayer/en/download/' id='mediaPlayer' name='mediaPlayer' ... src='videos/movie.wmv' >
.wmv Object.
How can i stop or start this movie with javascript or jQuery? I have a jQuery slideUp animation and i want to start this video if it is on focus.
thx.
Using jQuery in IE8 I found out this
$.each($('.object_vid'), function(k,v) {
v.stop();
});
Where .object_vid is the object tag class.
Also I was using fancybox, so if anyone find it useful, I put that code inside the 'beforeClose' event, cause 'afterClose' event is too late for it.
I have multiple video plays on a single page which I need to listen for onplay and onpause triggers, and execute custom functions which take the IDs from each of the videos tags. I need to be able to get the video id that was activated. Ive tried a few different ways, with the simple vid.onplay event works well when I know what ID is being called into. I've tried the $("video").onplay but doesn't seem to be working.
jQuery( document ).ready(function($) {
$("video").onplay = function() {
alert("The video has been paused");
};
var vid = document.getElementbyid("myVideo");
vid.onplay = function() {
alert("The video has been played");
};
});
<video class="mdia_video_player" id=myVideo poster="https://tcokchallenge.com/launch2/wp-content/uploads/2020/04/Carter.jpg?336660464" id="v0" onclick="doplayvideo(" 0")"="" controls="">
<source src="https://tcokchallenge.com/launch2/wp-content/uploads/2020/04/Carter.mp4?1222152426" type="video/mp4">
</video>```
In your first demo, it should be $("#video") to call by ID. It also says .onplay and then says that is was paused so you might want to fix that.
Ended up doing a much simpler answer, videos are within a php loop. So, I placed this within the tag
onpause="dopausevideo(<?=$vid ?>)"
onplay="doplayvideo(<?=$vid ?>)"