What event to look for...when changing currentTime of video element - javascript

When i change video element current time to a point where it hasn't buffered the video stops playing. And i want to know when it starts playing as soon as the first frame.
I have tried canplay and playing without success.
Tho i did get it to work by using play and pause.
So when i pause it canplay event works and then i listen for it and which tells me that at new position at which i paused now can be played. Then i just play it however. Is it, should be, possible to do it without pausing. Why there is no readystatechange as in ajax. If video is paused,stopped,waiting for buffering(as in my case) fire an event.

This list of all media element events should be helpful:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-definitions
The waiting and playing events should be relevant if you're just playing and the video pauses by itself. waiting fires when the video is forced to pause because it's buffering data from the network, and playing fires when it's ready to resume. It's worth noting the difference between play and playing. play fires when it's "trying" to play, i.e. .paused === false. But playing means that it's actually playing (although there are some weird cases where that's not strictly true, as noted in the linked document).
However, if you're seeking, you could use the seeking and seeked events. What I would do is keep a listener on all four events as well as canplay, and check the .readyState property in there.

Related

Video element pause while phone call

I've got an issue with my app and I could reproduce it on this sample: https://webrtc.github.io/samples/src/content/getusermedia/record/
During a phone call, if I open a tab with a video with audio element, the video automatically pause (and can see a pause event on the element)
This does not happen if the video element was loaded and played before the phone call start, or if the video has no audio.
Is this a normal behaviour, and can it be tracked (by an event other than the pause one) ? Is there any way to know there is a phone call ongoing, or any way to restart the video during the phone call (element.play() works, but a pause event immediately happens) ?
To reproduce:
On a mobile (iOS or Android)
Start a phone call
Open https://webrtc.github.io/samples/src/content/getusermedia/record/
The video is paused
If you manually launch element.play(), you can see the frame in the video updating, and then pause again
The record works correctly
what (likely) happens is that the video element (which needs to synchronize audio and video) is waiting for audio data but doesn't get any from the underlying layers when a phone call is active.
A possible workaround would be to change how you display audio and video, each in their own elements with MediaStream as srcObject that only have the respective audio and video track of the original stream.
Can you file a specification issue on https://github.com/w3c/mediacapture-main/ please? This is a rather interesting case that warrants some discussion.

Detect play/pause interaction on video element and ignore the events triggered through seek feature

I'm having an issue with the video element events:
I only want to fire off an analytics event when the play or pause button is interacted with. The play, pause, and playing events work as expected up until the seek functionality is used.
I'd like to isolate the play/pause events from the ones fired through seek/seeking.
When the video is playing and it is clicked (moved to a different point), the play, playing, and pause events are triggered because the video will pause to buffer and start playing the video again. This order is not always the same. When paused you don't get any of these events.
When debugging the playing and pause events, I've seen the following order:
Order 1: Pause, Seeking, Seeked, Playing
Order 2: Pause, Playing, Seeking, Seeked, Playing
This link to w3.org/mediaevents gives you a good indication of the above.
I've set up my own version in jsfiddle (see console logs).
I've tried setting a flag that is reset on a timeout and setting/checking the last state for each event e.g. lastEvent = 'seeking'. None of these worked 100% because of the inconsistent fire order. If you drag the seek bar it won't fire the play, playing, or paused events which adds another scenario.

How to make Audio events alert when media stops for buffering

I have Audio file playing in jQuery. sometimes when the download speed is slower than the playing speed, audio can stop. I want to get a notification when this situation is happening and so for example the music stops and I get the console error every minute, then once the buffer is loaded enough to play the song then it stops sending the notification. In reality there will be a loading icon that appears and disapears. So i need both inititing event and stopping event.
This is the events I tried to have but I do not get the right results.
the list of events are here: link
$(audio).on("canplay, playing, ", function () {
console.log("stop Buffering");
});
$(audio).on("buffered", function () {
console.log("buffering");
})
buffered is a property of audio element, not an event. You should be listening to waiting event.
The waiting event occurs when the video stops because it needs to
buffer the next frame. This event can also be used on
elements, but it is mostly used for videos.
w3schools.com/tags/av_event_waiting.asp

playing audio in event listener still gives error

I have this in the window load listener function.
var audio = new Audio();
audio.src = "assets/silence.mp3";
audio.load();
document.getElementById("body").addEventListener(
'touchstart',
function(evt){ audio.play(); audio = 0; },
{capture:false,once:true,passive:true}
);
In chrome on android (with remote debugging open), I touch the screen and it (correctly) triggers trying to play the audio. However, it fails and logs this to the console:
(index):65 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
How else am I supposed to trigger audio in a way that ensures the user initiates it, if not through a user interaction event listener?
aha. turns out, touchstart doesn't count as a "user interaction" from the perspective of the mechanisms preventing auto-play.
solution: swap it with click.
one thing I'm still frustrated with:
I'm using this specific snippet as a means of very quickly allowing audio to be played on the page so that the underlying html5 game can play audio without worrying about it being blocked by the browser.
however- because it needs to wait for a full "click" event (as opposed to a "touchstart" event), any audio that should be triggered on "touchstart" is going to be passed over (for the first time it would otherwise be triggered).
it seems like 1. there's no way to get around this to use it how I'd like, and 2. if you're able to just listen to the whole document for a "click" anyways, it's not actually doing anything from stopping unwanted audio.
If anyone can come up with a better solution, I'll swap the "correct answer" to that.
I had the same problem when I was making a web piano. The browser charged the piano on load, so you could press(actually touch the screen) the piano keys before you click something. What I did was to add a starting screen with a button to start the game and this solved it because you had to click something before you touch the piano keys.

Video Paused but its sound still trailing

I'm building a winstore app and building a skip-able intro (dynamically added it through JavaScript code).
However, if i skip it and set
this.video.pause();
in the button click function, even though the video is paused, the sound of the video is still trailing for a few sec before it stopped.
How could i make the sound stop right there with the images?
It's just weird that the video is already paused but the sound still can be heard when it should've been paused too (the video contain mp4 and mp3 in it).
It's weird because if a video is really paused it off the image and sound.
You can try this following command (it cut the sound) :
this.video.setAttribute("muted", "muted");
But it's not the solution because pause() method should work, so checks if you don't have 2 videos elements in your page.

Categories

Resources