We Keep Coding

How to run a function when a html5 video starts playing

i am building an app with ionic, i want to run a function whenever a video starts to play,like hide a button and etc. here's my code
let video = <HTMLVideoElement> document.getElementById(i)
if(video.paused) {
video.play()
video.oncanplay=()=>console.log('Starts playing');
}
The code is not working, please how can i run a function whenever any video on that page starts playing

var vid = document.getElementById("myVideo");
vid.onplay = function() {
alert("The video has started to play");
};
From here: https://www.w3schools.com/tags/av_event_play.asp

Try this, play returns a promise.
const video = document.getElementById("myVideo");
async function playVideo() {
try {
await video.play();
// video is playing, do your stuff here
} catch(err) {
// video is not playing
}
}
if(video.paused) {
playVideo()
}
For more info: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play

Javascript - How to onclick play several files various formats e.g. video and audio in one function

I tried to create a function to play and pause a video. But wondering if i could include also a audio file. Thanks.
var audio = document.getElementById("myAudio");
var video = document.getElementbyId("myVideo");
function playFile() {
audio.play();
video.play();
}
function pauseFile() {
audio.pause();
video.pause();
}

How to detect end of audio file when created dynamically?

I've created an audio object using jQuery, like so
var player;
$(document).ready(function() {
player = new Audio();
player.id = "player";
player.volume = 0.5;
});
I'm able to play, pause,... succesfully
player.src = file;
player.play();
This is when i run into trouble. I'm trying to detect when the player stops playing, but it's not working...
I've tried the following with no success:
$(document).on("ended", "#player", function(e) {
alert('stop');
});
$("#player").bind("ended", function() {
alert('stop');
});
$("#player").on("ended", function(e) {
alert('stop');
});
How can i tell when the player has stopped using jQUERY?

Why not use html5 audio element with pure js?
W3Schools
var aud = document.getElementById("myAudio");
aud.onended = function() {
alert("The audio has ended");
};

You are so close but should use addEventListener for ended event
$(document).ready(function() {
player = new Audio();
player.volume = 0.5;
var playerID = document.getElementById('player');
playerID.addEventListener("ended", function(e){
alert('ended');
}, false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio controls id="player">
<source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Audio credit by w3schools

chat sound not played in javascript

I am facing a problem for playing sound in javascript. The alert box is displayed but the chat sound doesn't play. Following is the code of chat.js.
for (x in newMessages) {
if (newMessages[x] == true) {
if (chatboxFocus[x] == false) {
//FIXME: add toggle all or none policy, otherwise it looks funny
$('#chatbox_'+x+' .chatboxhead').toggleClass('chatboxblink');
alert('before ');
var snd = new Audio("facebookchat.mp3");
snd.play();
alert('middle');
alert('after');
}
}
}

Try this:
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'facebookchat.mp3');
audioElement.load()
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
Reffered: How to use a javascript to autoplay a html5 audio tag
It might help, in your case.

Playing Audio Using Jquery

I have a small jQuery function to play audio when a user clicks the link. I don't need any controls, they are short samples. I just want to play anytime a user clicks. Here is the html for the section that should play;
</div class="classicalRecordings">
Open song
</div>
Then this is the jQuery to play the sound;
function playMusic(){
var audioElement = document.createElement('audio');
var audioElementSrc = $(this).attr('data-audio-src');
audioElement.setAttribute('src', audioElementSrc);
$.get();
audioElement.addEventListener("load", function(){
audioElement.play();
}, true);
}
$(function(){
$('.play').click(playMusic);
});
It doesn't seem to work. I think it has to do with the src variable, I am not sure I am passing it to the audioElement correctly. I have tested using an alert to be sure I am grabbing the data-audio-src correctly. Any help is appreciated.

I think that the event you're looking for is the loadeddata event.
function playMusic(){
var audioElement = document.createElement('audio');
var audioElementSrc = $(this).attr('data-audio-src');
audioElement.setAttribute('src', audioElementSrc);
$.get();
// changed "load" t0 "loadeddata"
audioElement.addEventListener("loadeddata", function(){
audioElement.play();
}, true);
}
$(function(){
$('.play').click(playMusic);
});
Although you could probably be better off having a static audio element and changing the src attribute on user clicks rather than creating a new audio element.
// example
var audio = document.getElementsByTagName('audio')[0];
audio.addEventListener('loadeddata', function() {
this.play();
}, true);
function playMusic() {
var audioElementSrc = $(this).attr('data-audio-src');
audio.setAttribute('src', audioElementSrc);
};
$('.play').click(playMusic);
There is a framework for this that is worth checking out. ListenJS. I wrote it :)

Try something like this:
<audio id="sound">
<source src="music/classical/open.mp3" type="audio/mpeg">
</audio>
And from code:
$(function(){
$('#sound').get(0).play();
});