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 ?>)"
Related
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.
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 have a problem with playing a video in HTML5 and the ended Event.
I view some HTML content and after a expired time I play a video. Is the video ended I will show the HTML content again. This should loop. Its for a presentation.
My problem is, that after the first complete run, the ended event will fired repeatedly and the HTML content will displayed false.
Here is the code part:
function playVideo() {
var video = $('video')[0];
video.addEventListener('ended', function () {
$('video').hide();
fadeShow();
}, false);
video.play();
}
function fadeHide() {
$('#content').fadeOut(1200, function () {
$('div ul[id^=item]').each(function () {
$(this).hide();
});
$('li[class^=visitor] span[id]').each(function () {
$(this).hide();
});
playVideo();
});
}
The fadeHide(); function will not called two times, just the video.addEventListener('ended', function () {}; fill called several times. `fadeshow(); will display the HTML content. Actually I use the newest version of Chrome.
Does anyone have an idea what went wrong?
Edit
HTML video code. I hide the video with css.
<video>
<source src="video/mp4/xxx.mp4" type="video/mp4" />
<source src="video/ogg/xxx.ogg" type="video/ogg" />
<source src="video/webm/xxx.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
Greetz
You should assign the event listener once or when you assign it upon play everytime, you need to detach the event listener again.
function playVideo() {
var video = $('video')[0];
video.addEventListener('ended', function () {
$('video').hide();
video.removeEventListener('ended'); <<<<<<<
fadeShow();
}, false);
video.play();
}
EDIT: I tested in chrome with this fiddle and indeed even if you remove the eventlistener it starts to fire multiple times. It seems there's an issue that removing the event listener does not work correctly.
You should change the event binding / unbinding to jQuery then there is only one ended event.
function playVideo() {
var video = $('video')[0];
$('video').bind('ended', function () {
$('video').unbind('ended');
$('video').hide();
fadeShow();
});
video.play();
}
And your fiddle updated (with shorter video)
Instead of adding an event listener and then manually removing it, try simply using the built in command called "one" (https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player.md#one-first-second-third-)
So your code will become somewhat like this:
function playVideo() {
var video = $('video')[0];
$('video').one('ended', function () {
$('video').hide();
fadeShow();
});
video.play();
}
Which is a little brief, and more dependent on the API itself. That I believe is generally a good practice because the functions in the API have been tested multiple times by a large number of people in the community over multiple browsers and operating systems.
I'm trying to play a sound when i click or hover over my play button? Here's what i have so far. I have a button, if i hover over it it changes the Image, now i also want it to play an mp3.
play a {
position:relative;
float:left;
width:155px;
height:134px;
background-image:url(../images/Goodsound_PLAY_UP.png);
}
play a:hover {
background-image:url(../images/Goodsound_PLAY_P.png);
I want to play a sound here
}
Im sorry for asking such an easy question. I'm an html noob, started last week.
It's not that easy to play a sound in HTML. In fact, it wasn't until the html5 audio was there ! Even if html5 is not supported everywhere, it's now a little bit easier to play a sound in the browser.
My advice is to use mediaelementJS, a javascript library that fills the gap between old browser and html5 audio (and video) spec. Do not use the player (that comes with a full control bar), but use only the mediaelementjs component. To use it, simply include the library in the head of your page
<script src="js/libs/mediaelement.min.js"></script>
First, you have to put an audio tag in your html :
<audio id="mySound" src="my_audio_file.mp3" type="audio/mpeg"></audio>
Then, call the Mediaelement library
var mySound = new MediaElement('mySound');
Finally, play it on your click or over event (here I use jQuery)
$('.play a').mouseover(function(){ mySound.play() });
You can use this:
JavaScript
var audio = $("#audio");
$("play a").mouseenter( function() {
audio.play();
}
where audio is an <audio> element, and play a is element which is hover.
Using jQuery:
$("object_element_id") .on ('mouseover', function(e){
// audio play code here
});
$("object_element_id") .on ('mouseout', function(e){
// audio pause/stop code here
});
Why "on"? Just imagine a "AJAX page refresh". For remove it:
$("object_element_id") .off ('mouseenter');
Why "mouseover" and "mouseout"? Maybe you want to add extra functions for each status, like change IMG SRC of the button, make some effects... feel free. And why the "e" element? The E element is the object who fired the event - the image, the link etc. Do everything with it (or just remove it).
For audio play, you can use HTML5 tags. It's easy and are supported by the major browsers (you didn't asked "retrocompatibility") You can cache the element (like Mateusz' answer) and use it:
var $audio = $("#audio_element_id"); //for cache the element
$audio.setAttribute('src', url_link); //for change the URL file (ir can be MP3, OGG...)
$audio.play(); //for the mouseover
$audio.stop(); //for the mouseout
Then, the final code:
var $audio = $("audio_element"); //caching
$("object_element_id") .on ('mouseover', function(e){
$audio.play();
});
$("object_element_id") .on ('mouseout', function(e){
$audio.stop();
});
You might also find this code useful (I think it is fairly modern, so it might not work with old browsers; I use it with Firefox 32).
<audio controls> <source src="song.mp3" type="audio/mpeg"> </audio>
There is a similar one for video, too:
<video width="320" height="240" controls> <source src="clip.mp4" type="video/mp4"> </video>
I have a couple of audio elements that appear in the body of my page. They look like this.
<audio id="sound1" preload="auto">
<source id="sound1source" src="../../Content/Audio/gau.mp3">
//add .ogg here later
</audio>
<audio id="sound2" preload="auto">
<source id="sound2source" src="../../Content/Audio/mah.mp3">
//add .ogg here later
</audio>
The audio plays when a user mouses over certain divs. Here's the code that triggers it.
var audio = $("#sound1")[0];
$("#ChoiceA").mouseenter(function () {
audio.play();
});
var audio2 = $("#sound2")[0];
$("#ChoiceB").mouseenter(function () {
audio2.play();
});
Everything above works fine. My problem occurs when I attempt to dynamically change the source element after making an ajax call. Here's my javascript that accomplishes that.
var src1 = "../../Content/Audio/" + data.nouns[0].Audio1 + ".mp3";
var src2 = "../../Content/Audio/" + data.nouns[1].Audio1 + ".mp3";
$("#sound1source").attr("src", src1);
$("#sound2source").attr("src", src2);
When I inspect the page after triggering the ajax call to change the source path for the audio elements, I see that the source is updated. No problem there. The problem is that the audio that the new paths point to does not play.
After hunting around I found this note on w3.org "Dynamically modifying a source element and its attribute when the element is already inserted in a video or audio element will have no effect. To change what is playing, either just use the src attribute on the media element directly, or call the load() method on the media element after manipulating the source elements."
The comment on w3.org seems to be related so I tried calling $('#sound1').load() and also $('#sound1source').load(). Neither solved my problem.
Can someone tell me what I've done wrong? If I need to cause the audio element to load again after dynamically changing the src, how do I do that?
-------------UPDATE-------------
Based on Swatkins suggestion I created the following function to create the audio tag when the user mouses over the target div. Unfortunately this has not solved the problem either.
function attachAudio1(src) {
$('#audio1').remove();
var audio = $('<audio>');
audio.attr("src", src);
audio.attr("id", "audio1");
audio.appendTo('body');
attachPlayAction();
};
function attachPlayAction() {
var audio = $("#audio1")[0];
$('#ChoiceA').live('mouseenter', function () {
audio.play();
});
};
You should call load like this:
var audio = $("#sound1")[0];
$("#ChoiceA").mouseenter(function () {
audio.load();
audio.play();
});
var audio2 = $("#sound2")[0];
$("#ChoiceB").mouseenter(function () {
audio.load();
audio2.play();
});
Have not tested doing it like above, but have testet this previously with a seperate function looking something like this:
<audio id="sound1" preload="auto" src="../../Content/Audio/gau.mp3">
function changeAudio(){
audio = document.getElementById("sound1");
audio.src = "../../Content/Audio/" + data.nouns[0].Audio1 + ".mp3";
audio.load();
audio.play();
}
$("#ChoiceA").mouseenter(function () {
changeAudio();
});
and that worked fine for me?
EDIT: Adding a fiddle, maybe that will help you figure this out?
http://jsfiddle.net/Z3VrV/
This is tricky. I would try replacing the whole <audio> element instead of just changing its source. This way, the new audio element hasn't been added to the page, so it will be forced to load the file.
load() followed by play() right away leads to trouble. Trying listening for the canplay event before attempting to play the audio as suggested in https://stackoverflow.com/a/8705478/1374208