We Keep Coding

Audio files (.mp3) don't play on page reload, only once when VS code/Live Server extension auto-reloads on save

Tested on Chrome/Firefox/Edge. I'm working on Win10 with VS code and the "Live Server" extension.
The page loads, first audio file(.mp3) plays, then different elements appear with Jquery delays, etc. Upon a certain < ul > fading in, the second audio file plays.
With "Live Server" 's auto-reloading on save feature or by clicking on my navbar's link to the same page (testing purposes), the sounds and Jquery functions work fine, but if I refresh with the browser itself, the sound files don't play again.
I tried solutions found on google, like setting currentTime, onLoad, but they didn't really answer a similar problem, the most success I've had was achieving the same results I had from the start.
I'm just starting to learn JS and Jquery, so I'm sorry if the code is messy.
<script type="text/javascript" src="script/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="script/main.js"></script>
<script>
var audio1 = $("#mantra")[0];
var audio2 = $("#wind")[0];
audio1.play()
$("document").ready(function () {
$(".choix").hide() // .choix is the class of fig1, fig2, fig3, fig4
$("#fig1").delay(9500).fadeIn(3000);
$("#fig2").delay(9550).fadeIn(3000);
$("#fig3").delay(9600).fadeIn(3000);
$("#fig4").delay(9650).fadeIn(3000);
$("#tagline").hide().delay(2000).fadeIn(1500)
.delay(1500).fadeOut(2000).queue(function(n) {
$(this).html("<br> Start here");
n();
}).delay(700).fadeIn(2000);
$(".textNav").hide().delay(800).fadeIn(1500);
});
$("#wind").stop("true").delay(9400).queue(function() { //9400ms delay to start just before fig1+
audio2.play()
});
});
</script>

In cases when the audio is not playing, check the console and you will find an error stating
DOMException: play() failed because the user didn't interact with the
document first.
This is because browsers don't allow music autoplay on page-load. It is necessary for the user to make some interaction (click, tap, etc.) with the window before playing the audio.
Source

How to get videojs to unload automatically

I'm currently using VideoJS in a Rails application (where there is a video player on every page) to display videos and I'm encountering a very strange problem:
The player works perfectly fine on the first page I visit but if I play the video and visit another page, the video from the first page keeps playing in the background even though the page isn't open anymore (you can hear the audio) and the video on the page you visited doesn't initialize properly (options aren't applied which means the video can't be played because controls are an option) and the console reads VIDEOJS: WARN: Player "player" is already initialised. Options will not be applied.
How to I get VideoJS to unload itself when the user leaves the page and why does it keep playing in the first place, the HTML5 video player didn't do that before.
Is the best way around this to get VideoJS to reload itself manually on page load? If so, how can that be done?
Note: If I navigate to any other page within the website the videos continue to not initialize, but if I reload the page, any page, the video on said page works again.
Note 2: Turns out that the onbeforeunload javascript event doesn't even fire if I click a link to another page, it only fires if you're going to a whole different website, so I can't even use that to .dispose() VideoJS on page unload.
Note 3: .reset() doesn't seem to be working either.

You can check to see if the player already exists and unload it, then reload it.
I was actually able to figure out a fairly simple and elegant solution:
if (player) {player.dispose()} else {var player}
player = videojs('player', {
//options
});
First it checks to see if the player exists. If it does, it destroys the VideoJS instance. If it doesn't, it creates the variable. Then it initializes the player.

By Referring this issue : https://github.com/videojs/video.js/issues/2904
We can re-write the above solution to something like this:
const playerId = 'video-player';
const videoOptions = {
controls: true,
sources: [{
src: 'test-file.mp4',
type: 'video/mp4',
}]
};
let player;
let players = videojs.players;
const imaOptions = { adTagUrl };
if (players && Object.keys(players).length) {
player = players[playerId];
player.dispose();
}
player = videojs(playerId,videoOptions);
player.ima(imaOptions);

I found this one to be the solution:
var oldPlayer = document.getElementById('my-player');
videojs(oldPlayer).dispose();
it's in the docs actually

Recording on database the time of a page view

i build a site (in PHP) where the users register and then access to reserved Powerpoint presentations. The owner told me to record the time users spend on viewing presentation, but i don't know how to display and record this kind of data. I think that JS and AJAX could help me, but i don't know what script can i use to do that.
Thank you in advice for your opinions and help.

basically you should trigger a php script when the user closes the powerpoint presentation, and this can be achieved for example opening the presentation in a modal window and force the user to click on a "close" button to terminate the presentation.
Another solution may be to open the presentation in a new window (even if is not so elegant) and use this script to trigger and action when the window onunload event is triggered:
<a>Click me!</a>
window.onclick = function() {
var win = window.open("/");
win.onload = function() {
console.log("onload");
win.onunload = function() {
alert("onunload");
}
}
}
Hope this help.

How to pause videos with Javascript

So i have a small problem in my website, first of all i made it with Wordpress, and i have a page with tabs every tab contain a video embedded from Youtube, my problem is when i passed from a tab to another the previous video doesn't stop, this is my code :
[tabgroup][tab title="Sport"]
[embedyt]https://www.youtube.com/watch?v=FVsgso273EE?theme=light[/embedyt][/tab]
[/tab]
[tab title="Action"]
[embedyt]https://www.youtube.com/watch?v=zuzaxlddWbk?theme=light[/embedyt][/tab]
[/tab]
[tab title="Strategi"]
[embedyt]https://www.youtube.com/watch?v=LKrRCADS7To?theme=light[/embedyt][/tab]
[/tab]
[/tabgroup]
and this is my page to understand the situation My-website
in my website you will find the videos tabs if you click in the SPIL menu item.
so plz if someone has any idea to do that i will be very appreciative :)

You can use the Youtube JavaScript API to do stuff like play, pause, seek to a certain time in a video, set the volume, mute the player, and other useful functions.
https://developers.google.com/youtube/js_api_reference
Just attach an event handler to your tabs that when clicked, get a reference to the current video, pause it then play the new one.
Here's a live demo of such functionality: https://developers.google.com/youtube/youtube_player_demo

If you are using HTML video tag you can use the code given below
var myVideo=document.getElementById("video1");
function playVid()
{
myVideo.play();
}
function pauseVid()
{
myVideo.pause();
}
Follow the given link as example http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_met_play_pause

Stopping a dynamically created Soundcloud oEmbed player when closing a modal

I am working on a webapp that allows people to share links from Soundcloud by copying and pasting the URL. Then the webapp generates a running list of people, allowing users to open a modal that loads the a Soundcloud player (via SC.oEmbed). The URL is derived from the element that opens up the modal. So SC.oEmbed opens up the URL found within the href attribute.
I have everything working great, except that when the modal is closed the music keeps playing.
There doesn't seem to be a stop() or pause() function associated with this player like there is with the Widget player. The only solution I have found is upon close to have SC.oEmbed open up another random soundcloud link but with auto_play off. This works but seems really inelegant and a waste of resources. There must be a better way no? Oh, and I'm using Twitter Bootstrap too.
Here's my jQuery code:
$(document).ready( function() {
SC.initialize({
client_id: "xxxxxxxxxxxxxxxxxx",
});
$("a[data-target='#myModal']").click(function(event) {
event.preventDefault(); /* makes sure <a> link doesn't actually open new window */
var url = this.href; // gets Soundcloud URL from href in <a> element
SC.oEmbed(url, { auto_play: false }, document.getElementById("audio_1_body"));
});
/* this part below is what I want to improve -- loading up a random track, just to stop playing of track that was loaded in the modal */
$("#myModal").on("hidden.bs.modal", function(){
url = "https://soundcloud.com/the-deep-dark-woods/sugar-mama-1";
SC.oEmbed(url, { auto_play: false }, document.getElementById("audio_1_body")); //this last part is what I want to improve
});

Does not seem that there is a way to do so from SC JS SDK.
Best you can do is to delete SC iframe:
$('#audio_1_body').html('')