I'm trying to make a project where a user can load multiple files at once and play them simultaneously. I want to give the options of uploading a video file, uploading an audio file, and/or entering a YouTube link. The difficulty I'm having is creating a custom play button for the case where they enter a YouTube link, as the play button will need to trigger multiple elements.
I found this codepen for custom play buttons: https://codepen.io/AmrSubZero/pen/oLOYMr
On its own, my code to set an iframe's source based on the url entered works fine, but when I attempt to integrate it here the custom play button ceases working. I think this is the result of onPlayerReady being loaded prior to the source being set. I've made an effort to resolve this based on that premise (calling on player ready after the button to enter the link is clicked) but no luck.
Codepen with the relevant bit of my project added: https://codepen.io/Carousel_/pen/zYpBZvR
HTML
<div class="buttons">
<button class="button" id="play-button">PLAY</button>
<button class="button" id="pause-button">PAUSE</button>
<button class="button" id="stop-button">STOP</button>
</div>
<p class="hideEngine">
YouTube Link:<br>
<input class="hideEngine" id="url" type="url" />
</p>
<iframe id="video" frameborder="0" allowfullscreen></iframe>
<button type="button" class="mybutton" id="mybutton" onclick="return embed();" >Initialize</button>
JS
var init = document.getElementById('mybutton');
init.addEventListener("click", function(){
onYouTubePlayerAPIReady();
onPlayerReady();
});
var embed = function(url) {
var url = document.getElementById('url').value
var id = url.split("?v=")[1];
var embedlink = "https://www.youtube.com/embed/" + id + "?enablesjsapi=1";
document.getElementById("video").src = embedlink;
}
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('video', {
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
player.playVideo();
});
var pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
player.pauseVideo();
});
var stopButton = document.getElementById("stop-button");
stopButton.addEventListener("click", function() {
player.stopVideo();
});
}
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
Any suggestions would be appreciated! Thanks.
Related
I want to have a mute button for my site, so when it's pressed it will unmute / mute the audio playing from the background video.
The js I have rn is this. Is there any way I can implement a button with this code?
`enter code here
var videos = [
'D1sZ_vwqwcE',
'BC_Ya4cY8RQ',
'HPc8QMycGno',
'JDglMK9sgIQ',
'hgKDu5pp_fU',
'oKMNj8v2gKE',
'TfnRTifSWh0',
'xO3aB5C3dpQ',
'v5hepekcHkk',
'4kjpZ_sPxzc',
];
var index=Math.floor(Math.random() * videos.length);
var html='<div class="video-background"><div class="video-foreground"><iframe frameborder="0" src="https://www.youtube.com/embed/' +videos[index] + '?controls=1&showinfo=0&rel=0&autoplay=1&iv_load_policy=3&&mute=1" allow="autoplay""></iframe></div></div>';
document.write(html);
site for reference: https://enph.la
I deserve no credit for this answer, but wanted to point out that the described issue actually got solved in Custom mute/unmute button Youtube API quite well using the YouTube API as it can be seen in this working example from Marco Aurelio Fernandez Reyes
(somehow it just works on jsfiddle, but not on stackoverflow...):
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('youtube-video', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady() {
console.log("hey Im ready");
//do whatever you want here. Like, player.playVideo();
}
function onPlayerStateChange() {
console.log("my state changed");
}
document.getElementById("mute").addEventListener('click', function(event) {
console.log(player);
if (player.isMuted()) {
player.unMute();
} else {
player.mute();
}
});
#mute {
width: 50px;
height: 50px;
background-color: red;
}
<iframe id="youtube-video" width="560" height="315" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&
autoplay=1
&disablekb=1
&enablejsapi=1
&loop=1
&controls=0
&mute=0" frameborder="0" enablejsapi="1" allowfullscreen></iframe>
<div id="mute">
</div>
<p>
Press red square to mute/unmute
</p>
Since a comment easily be overlooked, I just wanted to point out the working solution.
Currently, the video does not player.stopVideo(); in the code.
To reproduce: Click 1 svg play button, then click the X and you will see that.
How is that fixed in the code so that the same video stops after clicking the X?
Updated Codes:
Click Run, not update to test JSitor code:
Also, autoplay works inside JSitor: https://jsitor.com/qYKcpdB0tj
Backup copy: https://jsfiddle.net/0q63tr2m/
const videoPlayer = (function makeVideoPlayer() {
const players = [];
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onPlayerReady(event) {
const player = event.target;
player.setVolume(100);
}
function addPlayer(video, settings) {
const defaults = {
height: 360,
host: "https://www.youtube-nocookie.com",
videoId: video.dataset.id,
width: 640
};
defaults.events = {
"onReady": onPlayerReady
};
You can see the video still playing here:
What you have to do is as follow:
Add an id to your iframe element like so: id="iframe"
Remove player.stopVideo(); from createStopHandler function
On your createStopHandler function, add following code(if you want your video to stop and not pause, then change the func snippet "func":"pauseVideo" into "func":"stopVideo"):
var frame = document.getElementById("iframe");
frame.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
This should do it. Here you can see it working: https://jsfiddle.net/vjbex6t1/8/
function addClickToHome(goHome) {
goHome.forEach(function addEventHandler(goHome) {
goHome.addEventListener("click", homeClickHandler);
//STOP PLAYER AFTER HOME IS CLICKED
});
}
Initialize some variable with player globally and stop it when button is pressed to home
You can try this out,
var videoURL = $('#playerID').prop('src');
videoURL = videoURL.replace("&autoplay=1", "");
$('#playerID').prop('src','');
$('#playerID').prop('src',videoURL);
I would like to implement an audio player on all of my WordPress pages and therefore I need to create the HTML element with JS and manipulate it from there. Everything is working, except for when I press the play button, it redirects me to a new page with the audio link and plays it there. I would like to prevent that, so that I can play and stop it on the WP pages themselves and have the audio play in the background.
Any tips are greatly appreciated!
function addAudioPlayer() {
const audioPlayer = document.createElement("a");
audioPlayer.setAttribute("id", "audioPlayer");
audioPlayer.href =
"https://www.hostname.com/wp-content/uploads/2020/09/bird_sound.wav";
audioPlayer.setAttribute("data-id", "[data-song]");
audioPlayer.innerHTML = "▶";
Array.prototype.forEach.call(
document.querySelectorAll("[data-song]"),
function (song) {
song.audio = new Audio(song.href);
song.setAttribute("role", "button");
song.setAttribute("aria-pressed", "false");
}
);
document.addEventListener("click", function (event) {
if (!event.target.hasAttribute("data-song")) return;
event.preventDefault();
if (event.target.getAttribute("aria-pressed") == "true") {
event.target.audio.pause();
event.target.setAttribute("aria-pressed", "false");
return;
}
event.target.audio.play();
event.target.setAttribute("aria-pressed", "true");
},
false
);
document.body.appendChild(audioPlayer);
}
<div>
<audio id="myaudio" src="https://www.hostname.com/wp-content/uploads/2020/09/bird_sound.wav" controls="controls" preload="auto" hidden="true"></audio>
<input type="button" onclick="autoPlay()" value="Play"/>
</div>
<script language="javascript" type="text/javascript">
var myAuto = document.getElementById('myaudio');
function autoPlay(){
myAuto.play();
}
</script>
I'm loading YouTube videos using JS API. I can play, pause and go fullscreen with external controls but I can't exit fullscreen with double click on the video.
Using the code below try this:
load the video with button
go fullscreen using internal iframe button
double click on video (you will exit fullscreen)
Now my problem:
load the video with button
go fullscreen using external button
double click on video (nothing happens unless you press ESC key)
How can I do this? I need to exit fullscreen by double click (besides using ESC key)
fiddle: https://jsfiddle.net/cs8tnvkh/
HTML
<button id="btn_load">load video</button>
<button id="btn_play">play</button>
<button id="btn_pause">pause</button>
<button id="btn_fullscreen">fullscreen</button>
<div id="video_player">
<div id="video"></div>
</div>
JS
const YOUTUBE_LINK = "https://www.youtube.com/embed/#VIDEO?wmode=transparent&autoplay=1&rel=0&controls=1&enablejsapi=1&html5=1";
const YOUTUBE_VIDEO_ID = "mPyLF7NxZyY";
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('video', {
height: '480',
width: '720',
events: {
// call this function when player is ready to use
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
$("#btn_play").click(function() {
player.playVideo();
});
$("#btn_pause").click(function() {
player.pauseVideo();
});
$("#btn_fullscreen").click(function() {
var iframe = $('#video')[0];
var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
if (requestFullScreen) {
requestFullScreen.bind(video)();
}
});
}
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
$(document).ready(function() {
$("#btn_load").click(function() {
var video_src = YOUTUBE_LINK.replace("#VIDEO", YOUTUBE_VIDEO_ID);
$("#video_player iframe").attr("src", video_src);
});
});
I have an iframe youtube video that i want to play and pause by using buttons, this is what i have so far but it doesn't seem to be working, can anyone let me know what errors I've made.
<body>
<div class="youtubePlayer" id="youtubePlayer">
<iframe id="videoPlayer" width="340" height="200" src="https://www.youtube.com/embed/-0oZNWif_jk?list=PLD0qnaHPys3v_j-yGcnA3JJoTCFz_aK7s?enablejsapi=1&html5=1" frameborder="0" allowfullscreen> </iframe>
</div>
<button id="play-btn">Play</button>
<button id="stop-btn">Stop</button>
<script>
var videoPlayer;
function onYouTubePlayerAPIReady() {
videoPlayer = new YT.Player('videoPlayer', {
events: {
//calls function when player is ready
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
//bind
var playButton = document.getElementById("play-btn");
playButton.addEventListener("click", function() {
videoPlayer.playVideo();
});
var pauseButton = document.getElementById("stop-btn");
pauseButton.addEventListener("click", function() {
player.pauseVideo();
});
}
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
</body>
it should be videoPlayer.pauseVideo();