How to play live video on page load? - javascript

I have a javascript code that checks whether there are some people connected to a room in Twilio Programmable Video. If there are any participants, the javascript adds their remote video to the webpage.
// A function that adds a remote participant audio & video to the current web page.
function AddParticipantAudioAndVideo(participant) {
participant.tracks.forEach(publication => {
if (publication.track) {
document.getElementById("some html item").appendChild(track.attach());
console.log("track subscribed");
}
});
participant.on('trackSubscribed', track => {
document.getElementById("some html item").appendChild(track.attach());
console.log('track subscribed');
});
}
function InitializeRoom() {
// room is defined somewhere else
room.on('participantConnected', participant => {
console.log('A remote Participant connected : ' + participant.identity);
AddParticipantAudioAndVideo(participant);
});
// Loop over all the participants already connected to the room
room.participants.forEach(participant => {AddParticipantAudioAndVideo(participant)});
}
If I call this code from a button click for example, it works and live video plays properly :
<div onclick="InitializeRoom()">My Button</div>
However if I call the exact same code from the page load event handler (before any manual interaction with the page), it doesn't work and the video tag is not added to the html document.
window.addEventListener("load",function(event){
InitializeRoom();
});
I know that Chrome doesn't like videos with audio and autoplay = true. So I was wondering if this problem is due to the same reason and if there is any solution to that.
Thanks
Cheers,

I know that Chrome doesn't like videos with audio and autoplay = true. So I was wondering if this problem is due to the same reason and if there is any solution to that.
Yes, exactly.
Based on your other questions, I assume you're wanting to do this in some automated context where you have control over the browser. If so, you can add a flag to the Chrome/Chromium command line:
chrome.exe --autoplay-policy=no-user-gesture-required
See also: https://developer.chrome.com/blog/autoplay/#developer-switches

Related

Is it possible to mute the whole webpage with javascript?

I have a webpage which has a continuous(ish) livestream playing on it, but I want users only to be able to see and hear it at specific, exact times. I don't want them to have to keep disconnecting and reconnecting as this takes an unpredictable amount of time.
When the user loads the page, the livestream will autostart (muted and hidden - see below) and the user will have to unmute the video (even though they can't see it yet), but I don't want them to actually hear the livestream until the allocated time. I don't want them to have to manually unmute the video at the allocated times - My goal is to have everyone connected and stable so that (for example) at 10:04:30 precisely everyone can see and hear the livestream for 30 seconds, then it disappears (and mutes) until the next time at (say) 10:07:15 and so on. The process should happen in a way that allows the user to sit back in their armchair and not have to use their mouse or keyboard after the inital page load and unmuting of the livestream.
Dealing with the video side is easy - I can just show/hide a div with a black background that covers the video, but I'm not sure how to deal with the audio side of things. Is it possible to mute/unmute the webpage as a whole? Are there other ways to achieve this goal?
Another possible perspective is to have this done at the source somehow, by having the publisher connect and start publishing, but send blank video/audio until the right time, then switch over what is being sent. Again this needs to be done without the publisher having to keep reconnecting or do anything manually.
The publisher and viewers are all connecting using WebRTC.
Assuming something like the following:
<video id="vid" ...></video>
<div id="controls" ...>
<button id="mute-btn">Mute</button>
</div>
Then you need something like this:
const vid = document.querySelector('#vid')
const muteBtn = document.querySelector('#mute-btn')
vid.muted = true
window.userHasUnmuted = false
window.liveStreamStarted = false
muteBtn.addEventListener('click', () => {
window.userHasUnmuted = true
if (window.liveStreamStarted) {
vid.muted = false
}
}
// then, in callback for whenever live-stream starts...
if (window.userHasUnmuted) {
vid.muted = false
}
Original answer below
To mute a single audio or video element:
audioOrVideoElement.muted = true
To mute all audio or video elements on a page:
document.querySelectorAll('audio, video').forEach(el => el.muted = true)
Conversely, setting muted to false re-enables sound from that element.
For finer-tuned audio controls, you can also set the element's volume (in the range 0..1), for example:
document.querySelectorAll('audio, video').forEach(el => el.volume = 0.3)

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

Getting "play() failed because the user didn't interact with the document first" error when trying to play sound (javascript/html)

I'm trying to play a sound on a web page using javascript but whenever I do, I get the above error. Here's my code:
if (thing.startsWith("0")) {
var a = new Audio("audio.mp4");
a.play();
}
Furthermore, if you open the console, the sound automatically starts playing.
It´s because Google updated its Autoplay Policy, it is necessary for the user to make some interaction first with the window in which the sound will be played, for example a 'Start' button then you can play the sound. This happened because for many users it is annoying when a sound is played out of nowhere.
var resp = audio.play();
if (resp!== undefined) {
resp.then(_ => {
// autoplay starts!
}).catch(error => {
//show error
});
}
This code helped me remove the warning form the console

PHP and JS to read if audio streaming is broken from HTML5

Right now I have a very basic HTML5 Audio player that play from webradio.
I use a old iPad to play the music but also to show some information from a webpage. The problem is that is happen sometime the wifi and the old iPad does not like to stay connect so it disconnect and reconnect and then the player stop play the webradio. I need somehow a script that notice in real time or every 1 min if the radio is not running and restart the player for me. I guess I can use Javascript but have search a Little and not find any good idea and it also have to work in Chrome. It looks that some javaScript does not work in specific webbrowser
Basically, your <audio> element will dispatch an error event. Just listen for that and then retry. You could also listen to the progress event to see when it starts receiving again and then call play from there. It'd be something roughly like this:
const audio = getAudioElement();
audio.addEventListener('error', () => { playing = false; /* handle error */ });
audio.addEventListener('progress', () => {
if (!playing) {
audio.play();
playing = true;
}
});

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

Categories