I read links about YouTube IFrame API and doing a sample which has iFrame in HTML.
I need the below function to be called:
player.getVideoLoadedFraction();
I am using the below code for creating player object.
var player;
function onYouTubeIframeAPIReady()
{
alert('onYouTubeIframeAPIReady');
player = new YT.Player('player', {
height: '432',
width: '768',
videoId: 'tNpd9LCaG8',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
alert('player created');
}
and for testing purpose I added the player.getVideoLoadedFraction() in the onStateChange event.
function onPlayerStateChange(event)
{
alert("onStateChange has fired!\nNew state:" + event.data);
var progress = player.getVideoLoadedFraction();
alert (progress);
}
this method is not getting called. Even if I put any alert after var progress = player.getVideoLoadedFraction(); this line, alert is not displaying.
Can anyone help me to solve this.
Thank you
Don't call player.getVideoLoadedFraction(), call event.target.getVideoLoadedFraction().
Related
I have a player with a for loop counter underneath.
When I set the window to onload, the for loop works, but the youtube video does not display.
http://jsfiddle.net/ajLg0wf9/
When I set the window to no wrap - bottom of <head>, the youtube player works but the for loop doesn't.
http://jsfiddle.net/b8rha571/1/
What's the best way to resolve this?
You need to place youtube api functions at global level not inside onLoad event, something like this:
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'wQxmK1CZwik',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
loopStart();
player.playVideo();
}
function loopStart() {
player.seekTo(7); // Start at 7 seconds
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
setTimeout(loopStart, 30000); // After 5 seconds, restart the loop
}
}
document.addEventListener("DOMContentLoaded", function(event) {
var button = document.getElementById("clickme"),
count = 0;
button.onclick = function() {
count += 1;
button.innerHTML = "Click me: " + count;
};
});
</script>
I'm not sure how to do it correctly in jsfiddle but this works: http://jsfiddle.net/ajLg0wf9/10/
I want to use the onStateChange event provided by the Youtube API to listen to for the end of the video and then get a new video to play in the player. However, this does not seem to be possible for some reason.
function onPlayerStateChange(event) {
if(event.data === 0) {
console.log('done');
goNext();
}
}
function goNext() {
player.loadVideoById('JBJ1VPBrCl0', 0, 'default');
}
I register the event handler like this
player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '530',
width: '640',
videoId: '0Bmhjf0rKe8',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
Problem is: if I call my function goNext() manually, the video changes. If I wait for the video termination, the 'done' message is printed to the console, but the video does not change. Any ideas what am I doing wrong?
I've put up a fiddle here. Thanks!
http://jsfiddle.net/PHXY2/
FWIW, your fiddle example worked fine for me (after the video ends it automatically starts playing the "Short - Cat Meowing - Funny Cat Video - Red Laser" video ) Did you happen to have any YouTube-related browser extensions installed earlier? Some have been known to cause issues with the YT API.
So I'm writing a TamperMonkey script that sends specific videos to YouTube's embedded player however I want to automatically send them back once the video is finished.
So for example, video http://youtube.com/watch?v=XXXXX it would redirect to http://youtube.com/v/XXXXX. And then, once the video is complete, it would use window.history.go(-2) (as -1 would go to the normal page causing a loop).
The problem I'm having is that I haven't been able to get the second part, the function that runs when the video finishes, to work.
I have tried following the api and looking at other peoples problems and seeing what helped them but I can't seem to get it.
At the moment this is the code I have.
$(document).ready( function() {
var loc = document.location.href;
var l = loc.split('/');
var s = l[4];
var id = s.split('?')[0]
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '100%',
width: '100%',
videoId: id,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
alert('spotted');
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
window.history.go(-2);
}
}
});
I would appreciate it if someone would work with me to get this script working.
Thanks.
I am working on a simple page that has a text input where the user can add the id of the youtube video they want to insert into the page, then I call youtube's iframe api to load the video. However, if the user adds an id that does not exists I get a black screen.
I was hoping someone knows a way of checking if the video exists before loading it.
This is my code:
$(document).ready(function() {
$('#loadVid').click(function() {
var player;
var urlVid = $('#urlVid').val(); //GET THE VIDEO CODE FROM THE TEXT INPUT
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: urlVid,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
});
});
According to the documentation the onError should give you such info
100 – The video requested was not found. This error occurs when a
video has been removed (for any reason) or has been marked as private.
Add the onError event handler to the events object
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': function(errEvent) {
var errCode = errEvent.data;
if(errCode == 100) {
alert('Video Not Found');
}
}
}
Here $videoId contain video id of yuotube url
public function checkVideoExists() {
$headers = get_headers('http://gdata.youtube.com/feeds/api/videos/' . $videoId);
if (!strpos($headers[0], '200')) {
echo "The YouTube video you entered does not exist";
return false;
}
}
Just trigger a test Ajax request to the URL before opening the player. If the Youtube page video does not exist, it returns a 404 header (I've just tested this with a non-existing video URL).
If you use the $.ajax method, you could insert the player loading function in the success callback, and trigger an error alert in the error callback (as it should be called if the response headers are 4xx or 5xx)
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