Youtube javascript api onStateChange doesn't always work - javascript

As you can see on my site
http://www2.outofscopes.com/test/index.html
I'm trying to make the youtube API inform me of any event that is in onStateChange by alerting it. using the function below:
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
videoId: '-cSFPIwMEq4',
events: {
'onStateChange': function (event) {
alert(event.data);
}
}
});
}
But both in chrome and firefox(mostly firefox), it alerts only sometimes when reloading the page.
Why would that happen?

You may try this. http://jsfiddle.net/NrHdq/
<iframe src="http://www.youtube.com/embed/-cSFPIwMEq4" onload="floaded()" title="YouTube video player" id="player" allowfullscreen="" frameborder="0" height="400" width="900"></iframe>
<script>
//onYouTubePlayerAPIReady
function floaded() {
player = new YT.Player('player', {
videoId: '-cSFPIwMEq4',
events: {
'onStateChange': function (event) {
alert(event.data);
}
}
});
}
</script>
</body>
​

Related

Autoplay videos from google drive and alert when they finish JavaScript

This is the code I use for autoplaying youtube videos:
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '970',
width: '100%',
videoId: videos[index],
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
location.reload();
}
}
And the html:
<script src="http://www.youtube.com/player_api"></script>
videos[index] - A variable in which all the videos are stored.
Is there any variation of the code that can play videos from google drive (or basically any code that can autoplay the video and alert when it's finished, it has to be in js)
I have looked for solutions to my problem for a few hours now and I tried them all out but without any success.
Does anyone have an idea on how I could accomplish this through JavaScript?
The answer is NO because Google Drive doesn't have an API, and it doesn't work like Youtube.

Autostart a youtube video from Javascript

I am trying to automatically start a youtube video when it loads and when it finishes I want it to alert that it's done.
This is my HTML/JS
<div id="player"></div>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '0Bmhjf0rKe8',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
alert('done');
}
}
</script>
The part that alerts when the video is done is working but the auto-player doesn't. I HAVE TRIED TO PUT THE ?AUTOPLAY=1 TAG AFTER THE VIDEO URL BUT THAT DOESN'T SEEM TO WORK EITHER!
I have seen all the variations to this question and tried all the anwsers but none of them work.
Does anyone have any idea on what I should try next?
Thanks to cat my problem is solved!
All I had to do is go to chrome://flags/#autoplay-policy and select "No user gesture is required" in the dropdown menu under the "Autoplay policy" and then relaunch chrome.
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '0Bmhjf0rKe8',
autoplay: 1,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}

Iframe with embed Youtube Video stops after alert shows up?

I have the problem that my embed Youtube Video stops playing after a Popup like alerts or ion-select get called.
This is the html:
<iframe src='http://www.youtube.com/embed/aasdfsdf?showinfo=0&iv_load_policy=3&modestbranding=1&playsinline=1' frameborder="0" width="300" height="150" allowfullscreen no-padding webkit-playsinline playsinline></iframe>
I really cant show more code because there isnt more. Only a Button below the iframe witch pop up a alert. And if i do that the video stops and get load a second time.
How could i slove this issue?
TRY THIS DEMO
But its applicable on embeded youtube video
<div id="player"></div>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '0Bmhjf0rKe8',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
alert('completed');
}
}
</script>

How to control a youtube iframe sound through javascript/jquery event

I am looking to catch the sound provided in an iframe youtube video in order to stop/play it through a sound button.
Since the volume opt does not work anymore I tried this.
function toggleSound() {
var soundElem = document.getElementbyId("frame1") // also tried with iframe.getElementbyId()
soundElem.volume = 0.3
if (soundElem.paused) {
soundElem.play()
}
else
soundElem.pause()
}
//my yt video
<iframe id=iframe1 src="//www.youtube.com/embed/YOUTUBECODE?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
// my volume btn
<div class=volume-button onmousedown=toggleSound();>
I can't get the youtube audio and the youtubeAPI does not provide me an event with an external button ?
Kind Regards,
With the IFrame Player API you can use the mute method to mute the sound with an external event:
var player
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
width: 1280,
height: 720,
videoId: 'M7lc1UVf-VE'
})
}
function toggleSound() {
if (player.isMuted()) {
player.unMute()
} else {
player.mute()
}
}

how to display lightbox after Video Play Finishes?

I have a youtube video.
I want to show a lightbox when it stops playing. I need this to be done using javascript/jQuery or PHP. Ajax is also fine.
I looked for a solution but didn't find one that worked.
If you can use youtube api then, something like this should work:
<script type="text/javascript">
$(document).ready(function() {
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'YmHAAqOsBqA',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if(event.data === 0) {
//completed playing
//open lightbox
$('#yourElementId a').lightBox();
}
}
});
</script>
Did you mean something like this.
Hope it helps

Categories