I am using youtube api iframe and just getting going with the sample code. When I issue:
player.loadVideoById("ytidNo1") the proper video starts ("ytidNo1" is a valid youtube id)
Then, say, 10 seconds later, if I issue another:
player.loadVideoById("ytidNo2") the 2nd video starts, but it starts at the point where the last one was playing at (eg 10 seconds in).
This is new behavior in the last day or so and I have not changed my code.
To correct the problem, I tried:
player.loadVideoById("ytidNo1",0)
then
player.loadVideoById("ytidNo2",0)
and issue still happens.
Anyone else have or just starting to have this issue?
I also had the same problem. Playing around I eventually got it to work.
I had to use seekTo(0); (see Jim's comments)
More details about the problem.
If the video actually played to the end I didn't need to do anything.
If the video was skipped part way through I had to call
player.seekTo(0);
on the old video before calling loadVideoByID("ytid", 0); on the next video.
I also had to handle the case where after calling loadVideoByID I got an error. (e.g. 150) If I had an error I could not call seekTo because it would cause the next video to play audio only.
hope this helps
I am trying to reproduce the issue using the official sample::
https://developers.google.com/youtube/iframe_api_reference
after the stop I am selecting another video in the same way, and seems to work well:
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'u1zgFlCw8Aw',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
player.loadVideoById("tYrND5hMY3A");
}
</script>
</body>
</html>
http://jsfiddle.net/5wxFv/3/
Related
I'd like to ensure that when I initialise a new YT.player() that I can set it to make sure that it uses an embed from the www.youtube-nocookie.com domain. Is this currently possible? I haven't been able to find any reference to it in the docs yet.
I know, this is a late answer, but maybe relevant as it's still working:
You can use the host-parameter:
function onYouTubeIframeAPIReady() {
var player = new YT.Player('player', {
videoId: 'aqz-KE-bpKQ',
host: 'https://www.youtube-nocookie.com',
playerVars: {
origin: window.location.host
}
});
}
var s = document.createElement('script');
s.src = 'https://www.youtube.com/iframe_api';
document.head.appendChild(s);
<div id="player"></div>
Sadly, it does not work here on stackoverflow because of the same-origin-policy.
I have the same code running in an active project, though..
Ah. I managed to solve this just as I was about to post my question.
In my code I use something like:
<iframe id="myVideo" src="https://www.youtube-nocookie.com/embed/<VIDEO_ID>?enablejsapi=1"></iframe>
...then I can use the following to get the player that has already been embedded in the HTML via JS:
var player;
var onYouTubeIframeAPIReady = function() {
player = new YT.Player("myVideo");
};
Still, it would be nice if there was a way to initialise a www.youtube-nocookie.com video with JS too.
I'm working with the Youtube Javascript API (iframe version) and I'm using start and end parameters in order to play a portion only of a video. While everything works fine, once the end is reach, the player stop (normal behavior). However, when clicking again on play, the player does not seems to considering the start option. It always restart playing from the beginning of the video. It ends however at the defined end value, always.
<iframe frameborder="0" src="https://www.youtube.com/embed/5lGoQhFb4NM?autoplay=1&autohide=1&modestbranding=1&showinfo=0&controls=0&vq=hd720&rel=0&start=60&end=100" style="width: 100%; height: 400px;"></iframe>
Do you guys have any idea on why it is happening?
Here's how I was able to have the replay button start over at the original start time, as well as prevent users from scrolling outside the start/end bounds of the playerVars:
function onPlayerStateChange(event) {
var isClip = playerOptions.playerVars.start && playerOptions.playerVars.end;
var start = isClip ? playerOptions.playerVars.start : null;
var end = isClip ? playerOptions.playerVars.end : null;
if (event.data == YT.PlayerState.PLAYING) {
if (isClip) {
var currentTime = event.target.getCurrentTime();
if (currentTime < start || currentTime > end) {
event.target.seekTo(playerOptions.playerVars.start);
}
}
}
}
I've tried the above solution without succes (error console : "playerOptions is not defined")
But thx to this topic YouTube API - Loop video between set start and end times I've been able to successfully get the start/end parameters on replay :
<script>
// 5. The API calls this function when the player's state changes.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
var playButton = document.getElementById("play");
playButton.addEventListener("click", function() {
player.loadVideoById({
videoId: videoId,
startSeconds: startSeconds,
endSeconds: endSeconds
});
});
document.getElementById("play").style.cssText = "visibility:visible";
}
}
</script>
Explanations : in my case, I'm using a button id="play" to start the video. When the video is ENDED, the button #play is set to visibility:visible and the click event uses the player.loadVideoById corresponding parameters.
If you don't use the click event, the video will auto loop with the desired start/end values.
From Youtube API reference = https://developers.google.com/youtube/iframe_api_reference?hl=fr#Getting_Started
Does anyone know if it's possible to define which video-frame is used as a preview, using the YouTube IFrame Player API?
When my video is embedded now, it shows a video-frame near the end of my video, while I want it to be one of the first frames.
I don't think that this is possible using the API, but you could display the preview image yourself. This was discussed on following stackoverflow page: YouTube embedded video: set different thumbnail
No. It's not (yet) possible.
But Niels his answer got me inspired.
Actually his referral was about Youtube video's which are already embedded in the document, while the YouTube IFrame Player API embeds the video by javascript after the document has finished loading.
HTML part:
<div id="ytplayer">
<img id="ytThumb" src="http://placehold.it/640x390&text=Play">
</div>
Javascript part:
$(document).ready(function(){
$('#ytThumb').click(function() {
//Embed the youtube player
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
});
});
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
playerVars: {
'autoplay': 1,
'rel': 0
}
});
}
While my container, image and video all have the same dimensions.
I've coded a script for this web page.
That allows me to use the thumbnails on the right hand side in order to switch the 'main video'.
All appears to work fine, however if you play one video and then switch to another, and then switch BACK to the video that was originally playing, then the volume is muted when you continue watching it.
I have noticed that you can get around it by clicking the volume tool inside the player, but the average user most likely won't figure this out.
I've tried using the setVolume() method on something like:
$('#media video')
But FF tells me that the method doesn't exist. Could this be because I'm just trying it from within one of my other js files whereas the media player script itself is setup with Wordpress? I'm using the WP plugin you see.
Has anyone else had this issue?
Here is my .js that switches the videos if that helps:
$(document).ready(function() {
// swap media
$('#media-feed .thumb a').click(function() {
var mediaId = $(this).prev('input').val();
$('#media .content').each(function() {
if($(this).css('display') == 'block') {
$(this).fadeOut(350);
}
});
$('#media-' + mediaId).delay(500).fadeIn(350);
return false;
});
// swap sidebar detail
$('#media-feed .thumb a').mouseenter(function() {
var mediaId = $(this).prev('input').val();
$('#media-feed .detail').each(function() {
if($(this).css('display') == 'block') {
$(this).slideUp(125, function() {
var currentDetail = $('#media-detail-' + mediaId);
currentDetail.slideDown(125, function() {
currentDetail.css('display', 'block');
});
});
}
});
return false;
});
});
Also another problem I'm having is in Internet Explorer (all versions). See above, where I said about switching from one video to another, in other browsers the videos automatically pause when you click on another thumbnail. However in IE the videos continue to play. So basically, you'd have to pause the video and THEN change main video by clicking one of the thumbnails. Again, not very user friendly.
Does anyone know of a way I can get it to function like in other browsers? I can see that even IE doesn't have this problem on this page where the Fancybox plugin is used.
So that makes me think there must be a way to solve it in IE on the home page.
If anyone has any advice on this too that would be great!
Thanks.
We have YouTube videos on a site and want to detect if it is likely that they will not be able to view them due to (mostly likely) company policy or otherwise.
We have two sites:
1) Flex / Flash
2) HTML
I think with Flex I can attempt to download http://youtube.com/crossdomain.xml and if it is valid XML assume the site is available
But with HTML I don't know how to do it. I can't even think of a 'nice hack'.
I like lacker's solution, but yes, it creates a race condition.
This will work and won't create a race contition:
var image = new Image();
image.onload = function(){
// The user can access youtube
};
image.onerror = function(){
// The user can't access youtube
};
image.src = "http://youtube.com/favicon.ico";
You can load an image from youtube using javascript and check its properties. The favicon is tiny and has a consistent url -
var image = new Image();
image.src = "http://youtube.com/favicon.ico";
if (image.height > 0) {
// The user can access youtube
} else {
// The user can't access youtube
}
I think this is slightly better than loading javascript because this won't try to run any code, and while youtube might rename their javascript files, or functions from those files, they are unlikely to ever rename their favicon.
This should work. Basically, it loads a youtube.com javascript file, then checks if a function in that file exists.
<html>
<head>
<script src="http://www.youtube.com/js/account.js"></script>
<script>
function has_you_tube()
{
if(typeof addVideosToQuicklist == 'function')
{
return true;
}
else
{
return false;
}
}
</script>
</head>
<body>
<script>alert( "has_youtube: " + has_you_tube() ); </script>
</body>
</html>
I got stuck on this today and tried the favicon test but it wasnt working in IE. I was using the YouTube Player API Reference for iframe Embeds to embed youtube videos into my site so what I did is perform a check on the player var defined just before the onYouTubeIFrameReady with a delay on the javascript call.
<script> function YouTubeTester() {
if (player == undefined) {
alert("youtube blocked");
}
}
</script>
<script>window.setTimeout("YouTubeTester()", 500);</script>
Seems to work for me. I needed the delay to get it to work in IE.
This worked for me... Its also my first post, hope it helps some one too.
<?php
$v = file_get_contents("https://www.youtube.com/iframe_api");
//Tie counts to a variable
$test = substr_count($v, 'loading');
if ($test > 0)
{ ?>
<iframe>YOUTUBE VIDEO GOES HERE</iframe>
<?php
}
else
{
echo "<br/> no connection";
}
?>