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)
Related
I am trying to figure out how to trigger an audio file when a button is hovered and has a specific number displayed it will play a specific audio file.
The first code does not work for me.
The second code works but not correctly and some how doesnt take into consideration what is being displayed on the button.
//First-Code - Assigns answer-buttons with an event listener
document.getElementById('answer-buttons').addEventListener("mouseover", answerHoverButtonAudio);
//Button Function to call answerHoverButtonAudio
function answerHoverButtonAudio() {
if (document.getElementById('answer-buttons').innerText == ('1')) {
var audio = document.getElementById('Number-1')
audio.play();
}
}
//Second-Code - This code below triggers the audio but does it no matter what text is showing on the button somehow.
//Assigns answer-buttons with an event listener
document.getElementById('answer-buttons').addEventListener("mouseover", answerHoverButtonAudio);
//Button Function to call answerHoverButtonAudio
function answerHoverButtonAudio() {
if (answerButtonsElement.innerText.includes('1')) {
var audio = document.getElementById('Number-1')
audio.play();
}
}
You can use event passed via mouseevent listener which can check innerText to play particular audio.
code sandbox - https://codesandbox.io/s/amazing-hypatia-j76ggx?file=/src/index.js
const answerHoverButtonAudio = (event) => {
if (event.currentTarget.innerText.includes("1")) {
debugger;
var audio = document.getElementById("Number-1");
audio.play();
}
};
document
.getElementById("answer-buttons")
.addEventListener("mouseover", answerHoverButtonAudio);
<div id="answer-buttons">1</div>
<audio controls id="Number-1">
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>
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;
});
}
})();
I have images on my webpage that when clicked they play a sound.
The HTML looks like this:
<span div="2" class="sound" onclick="playSound(this,'sounds/activity_1/letter_m_a_1_correct_v2.mp3');">
<img src="../../images/rainforest/letter_m/activity_1/a1_monkey.png" width="324px" height="274px" alt="Monkey" onclick="showPanelGroup_2();" />
</span>
<span div="3" class="sound" onclick="playSound(this,'sounds/activity_1/letter_m_a_1_incorrect_b.mp3');">
<img src="../../images/rainforest/letter_m/activity_1/a1_butterfly.png" width="324px" height="274px" alt="Butterfly" />
</span>
I am currently using the following Javascript code to pause and play one sound at a time when clicked:
function playSound(el,soundfile) {
if (el.mp3) {
if(el.mp3.paused) el.mp3.play();
else el.mp3.pause();
} else {
el.mp3 = new Audio(soundfile);
el.mp3.play();
}
}
If both of the images are clicked the sounds will overlap. I need for first sound to stop playing as soon as the second image is clicked and for the second sound to play.
You are creating a new MP3 player for each element when you pass this to the function in your onclick.
You either need to use a single element to hold the player, in which case you can overwrite what is playing on each click, or you need to have each click send the pause signal to all the other players on the page.
The benefit of keeping a separate player for each one (as you are doing now) is that each one retains its progress, so that it will resume when you click it again, so that's the example that I will stay with.
Here's an example of pausing all of the other players when you click on any one of them:
function pauseOthers(elements, me) {
Array.prototype.forEach.call(elements, function(el) {
if (el == me) { return; }
if (el.mp3) {
el.mp3.pause();
}
});
}
function playSound(el, soundfile) {
var allPlayers = document.getElementsByClassName('sound');
pauseOthers(allPlayers, el);
if (el.mp3) {
if(el.mp3.paused) el.mp3.play();
else el.mp3.pause();
} else {
el.mp3 = new Audio(soundfile);
el.mp3.play();
}
}
I'm trying to make a function that when you click a play button, the video is showed center in page with lightbox effect. The problem is that i've set it to start playing, when you click the "open in lightbox play button" but the HTML5 video control show the play/pause button as "play" and not "pause". Is it possible to registrer if the video is playing it should add "pause" style from start etc.
link to live problem: http://instagib.dk/westring-kbh/
jsfiddle demo: http://jsfiddle.net/8rj09kL9/
I've tried something like this.
// light box effect with auto play
// show the popup outer
$("#play-index-video").click(function() {
$(".video-popup-outer").show();
$('.toggle-play-pause').addClass('pause');
$("#showreel-video")[0].play();
});
// hide the popup outer
$(".close-video").click(function() {
$(".video-popup-outer").hide();
$("#showreel-video").load();
});
// toggle play / pause
$('#play-pause').click(function() {
$('.toggle-play-pause').toggleClass('play','pause'); //Adds 'a', removes 'b' and vice versa
});
// video functionality
window.onload = function() {
// Video
var video = document.getElementById("showreel-video");
// Buttons
var playButton = document.getElementById("play-pause");
// Event listener for the play/pause button
playButton.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
} else {
// Pause the video
video.pause();
}
});
}
I've changed something in your code, since you already use jquery, I converted it all to jquery.
$(document).ready(function () {
// light box effect with auto play
// show the popup outer
$("#play-index-video").click(function () {
$(".video-popup-outer").show();
$('.toggle-play-pause').addClass('pause');
$("#showreel-video")[0].play();
});
// hide the popup outer
$(".close-video").click(function () {
$(".video-popup-outer").hide();
$("#showreel-video").load();
});
// Event listener for the play/pause button
$("#play-pause").click(function () {
$('.toggle-play-pause').toggleClass('play', 'pause'); //Adds 'a', removes 'b' and vice versa
var video = $("#showreel-video")[0];
if (video.paused) {
video.play();
} else {
video.pause();
}
});
});
DEMO http://jsfiddle.net/8rj09kL9/4/
Seems to work somehow.
A previous question I asked has got me half way to where I need to be, I now have 1 function that fires off 2 functions. A 'loader' function (a spinner graphic) and playAudio which play a file.
function loadPlay(src, trackName) {
loader();
playAudio(src, trackName);
}
When a play button is clicked the load spinner is supposed to appear and when the audio plays the spinner should go away.
Play button:
<span class="play" onclick="loadPlay('http://a797.phobos.apple.com/us/r30/Music/72/89/b9/mzi.aytblawp.aac.p.m4a','t3')" id="t3">
But what is happening is after the play button is clicked there is a slight pause (as audio loads) and the audio and spinner appear at the same time? The loader should appear as the track loads and then go away when the audio plays?
How do I add a pause to make sure the loader appears BEFORE the audio plays?
Both Functions:
function loader() {
// make a loader spinner appear as track loads
$(".loading").addClass("loadingnow");
}
function playAudio(src,trackname) {
// for Android
if (audioPlaying === false) {
if (device.platform == 'Android') {
src = '/android_asset/www/' + src;
}
media = new Media(src, success, error_error);
media.play();
//add playing class so play button is replaced with stop button
document.getElementById(trackname).parentNode.className="playing";
// now track is playing remove the loader spinner
$(".loading").removeClass("loadingnow");
audioPlaying = true;
} else {
//audio is already playing
}
}
function success() {
// track has finished playing so remove the stop button put play button back
$(".playing").removeClass("playing");
audioPlaying = false;
}
function error_error(e) {
//alert('great error');
//alert(e.message);
}
function stopAudio() {
// stop playing track
if (media) {
media.stop();
audioPlaying = false;
}
}
You can use setTimeout to force jQuery to wait a amount of milliseconds
function loadPlay(src, trackName) {
loader();
setTimeout(function(){
playAudio(src, trackName);
}, 1000);
}
This will force the playAudio to wait for 1 second. Your loader will pop up, but your user will have to wait for an additional second because of this.