Develop Reference

I want to make all videos can play/pause JS

I have a page with some videos. I want to implement the ability to click on a button to make a video play and if I click another button the current video will stop and the next video will start playing.
How can something like this be achieved?
My project is similar to Netflix's main page.
My Website:
https://capcom2store.com/mov4k.php
This is my JS:
<script>
var videoElement = document.getElementById("myVideo");
function playPause() {
if (videoElement.paused) {
videoElement.play();
} else {
videoElement.pause();
}
};
</script>

One of the things you can do is to do something similar to the following:
// Get all video elements on the current page
const videoElements = document.querySelectorAll("video");
for (const videoEl of videoElements) {
// Listen to clicks on every one of the videos
videoEl.onclick = () => {
if (videoEl.paused) {
for (const video of videoElements) {
// When starting to play one video, pause all others
video.pause();
}
videoEl.play();
} else {
videoEl.pause()
}
}
}
<video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
<video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
Although this is a very simple example, because it takes over all of the click events of the video elements. It would be better to detect clicks another way (like having an overlay element or a button)

How restart a closed video track , stopped using userStream.getVideoTracks()[0].stop()

I am trying to implement, the video on/off toggle for a webRtc application in react, so far i am able to stop the video using
userStream.getVideoTracks()[0].stop()
but can't seem to find any function to restart the video track .
I have tried the .enable method
userStream.getVideoTracks()[0].enabled = !userStream.getVideoTracks()[0]
but using this still leaves the webcam light on, which in undesirable but gets the functionality working,
on the other hand userStream.getVideoTracks()[0].stop() turns off the light but i am not able start it back.
Is there anyway to achive this without creating a new stream.

When you use track.stop() you can't reuse the track. You'll have to create a new one.
With the track.enabled method it should normally get the functionality that you're looking for. Disabling the camera indicator when disabled. Because as the official docs state:
If the MediaStreamTrack represents the video input from a camera, disabling the track by setting enabled to false also updates device activity indicators to show that the camera is not currently recording or streaming. For example, the green "in use" light next to the camera in iMac and MacBook computers turns off while the track is muted in this way.
https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/enabled
It could be another track is still using your track or it could be something browser version related why your camera indicator is still on.

best way to do is you can replace tracks.
function replaceTracks(elementId, newStream, localStream, peerConnection) {
detachMediaStream(elementId);
newStream.getTracks().forEach(function (track) {
localStream.addTrack(track);
});
attachMediaStream(elementId, newStream);
// optionally, if you have active peer connections:
_replaceTracksForPeer(peerConnection);
function _replaceTracksForPeer(peer) {
console.log(peer)
peer.getSenders().map(function (sender) {
sender.replaceTrack(newStream.getTracks().find(function (track) {
return track.kind === sender.track.kind;
}));
});
}
function attachMediaStream(id, stream) {
var elem: any = document.getElementById(id);
if (elem) {
if (typeof elem.srcObject === 'object') {
elem.srcObject = stream;
} else {
elem.src = window.URL.createObjectURL(stream);
}
elem.onloadedmetadata = function (e) {
elem.play();
};
} else {
throw new Error('Unable to attach media stream');
}
}
function detachMediaStream(id) {
var elem;
elem = document.getElementById(id);
if (elem) {
elem.pause();
if (typeof elem.srcObject === 'object') {
elem.srcObject = null;
} else {
elem.src = '';
}
}
}
}

Video tag won't autoplay in firefox, DOMException

I'm using Firefox 62.0.3 on my tablet, it works on one of the tablets but not the other.
On one tablet I am getting an error that says
DOMException: "The fetching process for the media resource was aborted by the user agent at the user's request."
I am not at all sure what this is telling me, does my video need to be within a clickhandler? I thought if autoplay is true and muted is true, i am good to go?
Again it works on the other tablet with the same firefox version.
<video id="asd" class="asd" oncreate={(el) => stream.start(el)}> Sorry, your browser doesn't support embedded videos.</video>
I then do
this.peerConnection.ontrack = (event) => {
const mediaStream = event.streams[0];
let remoteVideoElement = document.getElementById('stream');
remoteVideoElement.autoplay = "true";
remoteVideoElement.defaultMuted = "true";
remoteVideoElement.muted = "muted";
remoteVideoElement.playsinline = "true";
if ('srcObject' in remoteVideoElement) {
remoteVideoElement.srcObject = mediaStream;
} else {
// Avoid using this in new browsers, as it is going away.
remoteVideoElement.src = URL.createObjectURL(mediaStream);
}
let playPromise = remoteVideoElement.play();
if (playPromise !== undefined) {
playPromise.then((_) => {
// will play video
}).catch((err) => {
console.error("playPromise error: ", err);
})
} else {
console.error("playPromise is undefined: ", playPromise);
remoteVideoElement.load();
}
}
It works but when i try to resolve playPromise it gives the DOMException error, and load() does not work either on the tablet that is giving issues.

how to open html 5 video fullscreen if it was fullscreen before

I'm watching a series of videos on a website organised in a playlist. Each video is about 2 minutes long.
The website uses HTML 5 video player and it supports auto-play. That is each time a video ends, the next video is loaded and automatically played, which is great.
However, with Fullscreen, even if I fullscreened a video previously, when the next video loads in the playlist, the screen goes back to normal, and I have to click the fullscreen button again....
I've tried writing a simple javascript extension with Tampermonkey to load the video fullscreen automatically.
$(document).ready(function() {
function makefull() {
var vid = $('video')[0]
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
//var vid = $('button.vjs-fullscreen-control').click();
}
makefull()
But I'm getting this error:
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
It's extremely annoying to have to manually click fullscreen after each 2 min video. Is there a way I can achieve this in my own browser? I'm using Chrome.

If you can get the list of URL's then you can create your own playlist. The code cannot be accurately tested within a cross-origin <iframe>, for example at plnkr.co. The code can be tested at console at this very document. To test the code, you can use the variable urls at MediaFragmentRecorder and substitute "pause" event for "ended" event at .addEventListener().
If you have no control over the HTML or JavaScript used at the site not sure how to provide any code that will be able to solve the inquiry.
const video = document.createElement("video");
video.controls = true;
video.autoplay = true;
const urls = [
{
src: "/path/to/video/"
}, {
src: "/path/to/video/"
}
];
(async() => {
try {
video.requestFullscreen = video.requestFullscreen
|| video.mozRequestFullscreen
|| video.webkitRequestFullscreen;
let fullScreen = await video.requestFullscreen().catch(e => {throw e});
console.log(fullScreen);
} catch (e) {
console.error(e.message)
}
for (const {src} of urls) {
await new Promise(resolve => {
video.addEventListener("canplay", e => {
video.load();
video.play();
}, {
once: true
});
video.addEventListener("ended", resolve, {
once: true
});
video.src = src;
});
}
})();

PhoneGap, Play Audio, Stop Audio

I have created a mobile application using phonegap. I planned to create two buttons, one to play the sound and another one to stop the sound. i tried several methods but none worked. I tried using code stated below, but didn't work also.
Javascript:
function playAudio(src) {
if (device.platform == 'Android') {
src = '/android_asset/' + src;
}
var media = new Media(src, success, error_error);
media.play();
}
function success() {
// ignore
}
function error_error(e) {
alert('great error');
alert(e.message);
}
function stopAudio() {
if (media) {
var media = new Media(src, success, error_error);
media.stop();
}
}
HTML:
<button onclick="playAudio('BackgroundMusic.mp3') "id="play" ></button>
<button onclick="stopAudio()"id="pause" ></button>
Can anyone help me to sort this out?