Checking for end of video on iPad - javascript

I can't seem to listen for onended on a video on iPad(Safari)...I want to remove a class that I was able to add when the play button was pressed, but I can't seem to track down when the video ends (works well every where else including iphone, just need it for iPad/Safari)
link here: http://www.artandseek.net/meyerson/tour/
code snippet here
$(".playBtn").click(function(){
var thisVideo = $(this).prevAll(".img-wrap").children(".togglePlay").get(0);
thisVideo.onended = function(e) {
$(this).fadeOut().parent(".img-wrap").removeClass("playing");
$(this).parent().next("h2").fadeIn();
classie.remove( thisVideo, 'tabletActive');
}; ...

I was able to find the answer here:
Bind Play/Pause/Ended functions to HTML5 video using jQuery
using this:$(thisVideo).bind('ended', function () {
console.log('working');
});

Related

pause JW player?

I have three tabs.
Each tab having two videos in slider.
The problem is when I switch any tab or click any single video,all other should pause.
I can collect all the ids and then loop over to use stop().But is there any other method that is much more cleaner and simpler.?
jwplayer('video_pub').stop(); //for 1 video..how can i do for all videos?
Instead of using jwplayer().stop(), you can use jwplayer().pause()
for this, I mostly prefer jwplayer().play(false).
Source : Jwplayer API
LOGIC
just get the parent video wrapper which have all tab (since
each tab has two video)... find jwplayer whiich is currently being
played and stop all other players.
pauseMedia : function(playingMediaId) {
$('#parent_video_wrapper').find('.jwplayer, object').each(function(){
currentMediaId =$(this).attr('id');
if( jwplayer(this).getState() == "PLAYING" || jwplayer(this).getState() == "BUFFERING" ) {
if(currentMediaId != playingMediaId){
jwplayer(this).play(false);
}
}
});
}
now you can either use above function as pauseMedia() or
pauseMedia(mediaId), Both will work
In video Setup if you use it like this
jwplayer("video_"+videoId).setup({
events : {
onPlay : function (callback){
var playingVideoId = 'video_'+videoId;
pauseMedia(playingVideoId);
//pausing other simulatenously playing video in a tab
}
}
});
I think above code might do the trick, just give it a try

Javascript: how to use multiple play buttons in audio player

So i'm trying to use two play buttons in my audio player, this is because i have one in audio player and other in sidebar for example.
Follows my jsfiddle: http://jsfiddle.net/LqM9D/5/
Someone can help?
Obs: i'm using html5 audio and jquery/js on my player
You're re-using the same ID twice. IDs must be unique. Correct that and it works fine. And since you're using jQuery, you could use:
window.player = $('#player')[0];
$('#playpause, #playpause2').click(function () {
if (player.paused) {
player.play();
this.innerHTML = 'pause';
} else {
player.pause();
this.innerHTML = 'play';
}
})
jsFiddle example
Use a common class on your buttons, instead of ids. IDs need to be unique. Then set jQuery click method. Updated
i have a similar question. I would like to list multiple play buttons and be able to use a listenEvent to trigger play and pause for each. However I can't seem to wrap my head around it. It works fine when I code the first button but when I try to introduce a second player it breaks.
I wish to keep my audio tags as html and call them in the js.
Here is a link so it's more understandable
https://codepen.io/my-mosas/pen/WNzvoGY 0123

playing event in html5 video TAG

I have tried like this
document.getElementById('myVID').onplaying = alert("Playback started");
But, the alert is not coming. I have tested it in chrome. Is there any issue in this code?. Otherwise this event is not supported.
Working JSFiddle: http://jsfiddle.net/E7FhU/
I would say change your code to be like this because as #Passerby said, alert returns undefined and you need to assign a function. Additionally, this can be accomplished with simple javascript.
<script>
var video = document.getElementById('myVID');
video.onplaying = function(e) {
/*Do things here!*/
alert("hello video");
}
</script>
When you click play the alert is displayed.
References:
Detect when an HTML5 video finishes

jQuery - FadeToggle - different actions if element is visible or not

I have a button, when you click on that button, I'm doing a fadeToggle() to show or hide a popup.
That popup is appearing on top of a flash video that autoplays.
So, what I want to do, is when the popup is visible, I want to pause the video. When it's hidden, play the video.
My video player already support those function. So this is working fine:
videoPlayer.pause();
videoPlayer.play()
So what my FadeToggle() would looks like ? Right now I have this code:
$("#categorySlider").fadeToggle('fast', function() {
var videoPlayer = document.getElementById("videoContainer");
videoPlayer.pause();
});
I'm missing the play() part here, but I cant figure out the syntax to add it?! If fadeToggle is not the right thing to use, any jquery or javascript is fine!
Any helps please?
You could use the jquery :visible selector to find out if #categorySlider is visible or not and depending on that pause or play the video.
$("#categorySlider").fadeToggle('fast', function() {
var videoPlayer = document.getElementById("videoContainer");
if ($("#categorySlider").is(":visible"))
videoPlayer.pause();
else
videoPlayer.play();
});

Using jQuery to control HTML5 <audio> element

I'm trying to use jQuery to control an HTML5 audio element, but I'm no genius with JS.
What I want is for the player to start on page load, which I've done, but when the play button is clicked, I want to check whether or not the audio is playing.
If it's playing when clicked: Stop the audio.
If it's not playing when clicked: Play the audio.
If you could help, it'd be much appreciated.
Source here: http://www.julake.co.uk/media/loader.php?page=contact
Many thanks,
you should use a single play/pause toggle button in which you need to check if your audio is paused or not
var audioplayer = document.getElementById("audio-player");
$("#play-bt").click(function(){
if (audioplayer.paused) {
audioplayer.play();
}
else {
audioplayer.pause();
}
$(this).toggleClass('pause'); /* style your toggle button according to
the current state */
})
var audio = new Audio("http://www.w3schools.com/html5/song.ogg"); //or you can get it with getelementbyid
audio.addEventListener('canplay', function() {
//code, when audio can play
audio.play(); //this function will start the music
})
with audio.play() function you can start it. You don't need JQuery
If you wish to use a jquery selector or have a jquery selector already, you can add [0] to get the native dom element.
So an example that actually uses jquery would be.
$('audio')[0].pause()

Categories