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();
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.
Is it possible to detect if a video has been removed or is no longer available on Youtube using the iFrame API?
The following code will detect changes to the youtube iframe but the only data point I can find thats remotely close is -3 which means unstarted but this could be applicable to any working video as well.
CodePen
<iframe id="yt-iframe" width="630" height="354" src="http://www.youtube.com/embed/Rlm8YH2i9gY?enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>
<script type="text/javascript">
var tag = document.createElement('script');
tag.id = 'yt-script';
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
console.log('yt scripts loaded');
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('yt-iframe', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
console.log('video player ready');
}
function onPlayerStateChange(event) {
console.log(event.data);
}
</script>
You can detect before playing the video by checking the duration of the video, if duration of the video is 0 seconds then it is highly likely to be deleted/can't be played
<iframe id="yt-iframe" width="630" height="354" src="http://www.youtube.com/embed/tPEE9ZwTmy0?enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>
<script type="text/javascript">
var tag = document.createElement('script');
tag.id = 'yt-script';
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
console.log('YT scripts loaded');
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('yt-iframe', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
console.log('Video player ready');
if (event.target.getDuration() <= 0) {
console.log('Video likely to be removed');
}
}
function onPlayerStateChange(event) {
console.log(event.data);
}
</script>
Setup an onError event handler and check for event.data === 100. The YouTube IFrame Player API describes all of the player error events.
No, atleast not straightforward.
Any idea why this script doesn't work? All I want is to track onStateChanged event, but that is never called either.
When I open the html document with below code, I have no errors, the youtube script loads just fine, the player object is not undefined, looks fine too.
$(document).ready(function(){
loadScript();
});
function loadScript() {
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('player', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
alert(player);
}
var done = false;
function onPlayerStateChange(event) {
alert('state changed');
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 3000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
function onPlayerReady(event) {
event.target.playVideo();
}
My iframe:
<iframe id="player width="400" height="300" src="https://www.youtube.com/embed/j0pJekWgeFE" frameborder="0" allowfullscreen></iframe>
See fiddle: https://jsfiddle.net/rg2uy1f8/
I found an answer here: How do I get the reference to an existing YouTube player?
The reason my solution didn't work, was that my iframe was missing an attribute: enablejsapi="1" and also I was missing: ?enablejsapi=1 in YouTube video url.
You may find the working solution here: http://jsfiddle.net/bf7zQ/2/
My coding knowledge is mostly self-taught and limited.
I have a forum which I have set to replace youtube URLs in posts with iframe embeds of the video. The one unique aspect to it was that it was forcing the embeds to play at 720p quality (if available) even if the player was smaller than youtube recommends. The "why" is a long story but I want to keep doing it that way. I'm trying to get the same thing working with the new API.
In the sample code below I can get it working for one video on a page but not both on the same page. I imagine it has something to do with duplicate functions or something along those lines.
<html><body>
<script>
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 xyzplayer;
function onYouTubeIframeAPIReady() {
xyzplayer = new YT.Player('xyzplayer', {
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
event.target.setPlaybackQuality('hd720');
}
}
</script>
<iframe id="xyzplayer" type="text/html" width="832" height="468" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&html5=1" frameborder="0"></iframe>
<br><br><br>
<script>
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 abcplayer;
function onYouTubeIframeAPIReady() {
abcplayer = new YT.Player('abcplayer', {
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
event.target.setPlaybackQuality('hd720');
}
}
</script>
<iframe id="abcplayer" type="text/html" width="832" height="468" src="http://www.youtube.com/embed/IwfUnkBfdZ4?enablejsapi=1&html5=1" frameborder="0"></iframe>
</body></html>
Because your code is loading the library twice, the second load overrides the functions you're defining in the first and hence events from the first one will never be handled. Try combining the player creation into a single method ... something like this (so that players for both embeds get their events listened to):
<html><body>
<iframe id="xyzplayer" type="text/html" width="832" height="468" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&html5=1" frameborder="0"></iframe>
<br/><br/><br/>
<iframe id="abcplayer" type="text/html" width="832" height="468" src="http://www.youtube.com/embed/IwfUnkBfdZ4?enablejsapi=1&html5=1" frameborder="0"></iframe>
<script>
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 abcplayer,xyzplayer;
function onYouTubeIframeAPIReady() {
abcplayer = new YT.Player('abcplayer', {
events: {
'onStateChange': onPlayerStateChange
}
});
xyzplayer = new YT.Player('xyzplayer', {
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
event.target.setPlaybackQuality('hd720');
}
}
</script>
</body></html>
So I have My code it detects when the player has stopped the problem is I can't get it to play from 0 seconds when the end has come I'm using the Iframe embed that holds a html5 video, Here is the code!
<div id="youtube-fs"><iframe id="youtube-iframe" type="text/html" src="http://www.youtube.com/embed/LYL0lzmrvk8?enablejsapi=1&html5=1&autoplay=1&showinfo=0&controls=0&rel=0&wmode=transparent&vq=hd1080&hd=1&loop=1" frameborder="0" wmode="Opaque" ></iframe> <script type="text/javascript">
<!--
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() { player = new YT.Player('youtube-iframe', { events: { 'onStateChange': onPlayerStateChange } }); }
function onPlayerReady(event) { event.target.playVideo(); }
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) { player.playVideoAt(0); } // Play from 0 seconds
}
-->
</script>
</div>
Any idea's? maybe seekTo? or something
Thank you in advance!
Used player.seekTo(1, true); that worked
Try this
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player.seekTo(0);
player.playVideo();
} // Play from 0 seconds
}
http://plnkr.co/aoSupfT7vXGGoM99sNwl