I want to use the YT.Player code so that I can detect events. I have a CSV file with Youtube video ID's and a function that puts the ID's in an array and want to be able to dynamically change the ID when a user click an image. Essentially like this:
html
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
javascript
// 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.
// NOTE: videoId is taken out and instead is placed as the generated IFRAME src from the postSelection function
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '100%',
width: '100%',
videoId: '<<CALL TO FUNCTION OR VARIABLE HERE>>',
events: {
//'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
If you are familiar with this code then what happens is the #player DIV is replaced by an IFRAME. I can change the IFRAME source with this function:
function postSelection() {
$("#player").attr("src", _selected.attributes.url); //_selected.attributes.url comes from the CVS file
}
But this is very buggy and not cross browser friendly. If I use a standard IFRAME and not the YT Player API then everything works just fine. But I want to detect the end, and pause and so on so I have to use the API. My guess is that it is an issue with state and that persistence is lost some where in the creation of the IFRAME.
Regards.
This is very simple to do with the js api. When you want to load a new video just call player.loadVideoById(videoId); Details at https://developers.google.com/youtube/iframe_api_reference#loadVideoById
In case this is of help to anyone struggling as I did...
This player.loadVideoById(videoId) was only working for me when videoId was hardcoded e.g.
player.loadVideoById('sdfexxdfse')
When I tried to put that value into a variable directly or when storing in an array it wasn't working even though it contained the same information.
The video was coming up with incorrect parameter each time.
Adding it to a variable in this way
var x = new String(variabledatahere)
did the job.
Related
I am trying to create a Youtube player using a WebView instead of the Youtube API for android which I find very limiting.
I have tried using HTML and JavaScript to play the video on a iFrame as instructed by Google: https://developers.google.com/youtube/iframe_api_reference
Mainly using this HTML code and load it to the WebView:
<!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 = "https://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: '360',
width: '640',
videoId: 'M7lc1UVf-VE',
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();
}
</script>
</body>
</html>
I have therefore just started putting a regular iFrame and the video is actually loaded and showing with this kind of code:
webview.loadData("<body><iframe id=\"iframe\" src=" + url + " height=\"300\"\n" </iframe></body>", "text/html","utf-8");
The problem is that I can autoplay the video, as well as having absolutely no control over the player.
I have tried adding "autoplay=1" with all its possible variations to autoplay. And the first method using the proper div method and javascript as instructed by google results in having absolutely nothing showing, with these log messages:
W/VideoCapabilities: Unrecognized profile 2130706433 for video/avc
W/AudioCapabilities: Unsupported mime audio/alac
W/AudioCapabilities: Unsupported mime audio/dsd
W/VideoCapabilities: Unsupported mime video/divx
W/VideoCapabilities: Unsupported mime video/divx311
W/VideoCapabilities: Unsupported mime video/divx4
W/VideoCapabilities: Unsupported mime video/mp4v-esdp
I/VideoCapabilities: Unsupported profile 4 for video/mp4v-es
I still get these messages when using the iFrame alone, but the video loads and I can click on it and it plays as expected.
If anyone can shed any light on this problem I have, ideally how to control the video using the proper "Google" way, or at least help me autoplay it using the other method.
P.S: I have enabled JS, hardware acceleration, set chrome as the web browser, checked the permissions. As I have said, I get the video to play after physically clicking on it, but it's just user driven and I have no control over it programmatically.
OK, this has been asked many times before – but Youtube seems to change things up every other day. I can't find a way to force a Youtube embed to start playing a HD source from the beginning. The switch to HD always happens after 5-10 seconds.
Methods that don't work (anymore):
Adding &hd=1 parameter to the iframe src
Adding &vd=hd720 or &vd=hd1080 parameters to the iframe src. Described here: Force youtube embed to start in 720p
Changing the iframe dimenstions to width="1280" heigh="720" in the html embed code and then using CSS to scale the iframe back down/up to the parent div. Described here: http://thenewcode.com/717/Force-Embedded-YouTube-Videos-To-Play-In-HD and here: How to force youtube to play HD videos
The only possible way would be using the Youtube JavaScript API, as described here:
http://biostall.com/the-100-guaranteed-method-to-get-youtube-iframe-embeds-playing-in-hd-by-default/
// 1. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 2. This function creates an <iframe> (and YouTube player) after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '1280',
width: '720',
videoId: 'E37YNMYlKvo',
events: {
'onReady': onPlayerReady
}
});
}
// 3. The API will call this function when the video player is ready.
function onPlayerReady(event) {
player.setPlaybackQuality('hd1080'); // Here we set the quality (yay!)
event.target.playVideo(); // Optional. Means video autoplays
}
<div id="player"></div>
But: I want to use a simple iframe embed since videos will be embeded through the wordpress oembed feature.
Is there any way to run the player.setPlaybackQuality('hd1080'); function for a simple iframe embed?
You can also set your playerVars
vq: 'hd1080',
144p: &vq=tiny
240p: &vq=small
360p: &vq=medium
480p: &vq=large
720p: &vq=hd720
1080p: &vq=hd1080
From what I understand, there seems to be a 'VQ' parameter that you can attach to the end of the embed iframe and set hd720 or hd1080 as the value. After some research it seems YouTube once offered the 'VQ' parameter, then took it away, and as of this writing is back again! In short, your embed should look something like this:
<iframe src="https://www.youtube.com/embed/VIDEO_ID_HERE?vq=hd1080" frameborder="0" allowfullscreen></iframe>
Here is an article related to this that I found during my research: Found Here
I've tested this briefly on a page and it seems to work (for now). Hope this helps!
What I want is to have a DIV divided in two, so that when clicking on the left DIV it expands to full height and starts playing the video, while closing it with a close button, the video pauses and the left DIV regains its normal height and width.
I found this code whitch is what im looking, but now I have to add the iframe and make it play and pause in while clicking the play and close button:
[1]: http://jsfiddle.net/davidThomas/CFNUJ/1/
Any ideas?
Thanks!
As explained in the full YouTube player API here, you will want to create an empty div with an id of player for this script to hook into. Once the onPlayerReady event fires, you can hook into the javascript player object that the script creates and use it to manipulate the video player with calls like player.playVideo(). The iframe that replaces your empty div can then be modified like any other DOM element to change the size of the video player.
Note: The script I'm providing is cut down from the original API example so that it doesn't stop after 6 seconds
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://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: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(){
//Do Nothing for now
}
</script>
I am trying to use the YouTube iframe API to fire an event after a video is finishing playing. The iframe containing the YouTube video is loaded with the document and has the enablejsapi=1 parameter in the URL like so:
<iframe id="myytplayer" src="http://www.youtube.com/v/8mmd_eHYmMY?enablejsapi=1&playerapiid=ytplayer&version=3" allowfullscreen="" frameborder="0"></iframe>
I have successfully implemented the onYouTubeIframeAPIReady function but I cannot add an event listener to the YouTube object once it is ready. The player state alert does not show when playing/pausing the video. Here is my javascript code:
function onytplayerStateChange(newState) {
alert("Player's new state: " + newState);
// check player ended
}
function onYouTubeIframeAPIReady() {
alert("ready");
ytplayer = document.getElementById("myytplayer");
ytplayer.addEventListener("onStateChange", onytplayerStateChange);
}
I also had to load the following resource in order to get the "ready" alert to show up.
<script src="http://www.youtube.com/player_api" type="text/javascript"></script>
I have created a jsFiddle here.
You can't add an event listener just to the DOM element (as you could do in the older javascript API); with the iframe API you have to create a YT.player object based on the DOM element first, and then add the event listener there. Something like this:
function onYouTubeIframeAPIReady() {
ytplayer = YT.Player("myytplayer", {
events: {
'onStateChange': onPlayerStateChange
}
}
Also, be a bit careful loading the player_api via a script tag ... there's no guarantee that your onYouTubeIframeAPIReady function will be defined when that's fully loaded. Better to do something like this, before defining your ready function:
<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);
I want to load a YouTube video, then mute, play, pause, and unmute it immediately. In doing this, I hope to present the user with a video that doesn't have a big play button on it, and does have the controls on the bottom. In order to do this, I have the following code:
<script type="text/javascript">
function onYouTubePlayerReady(playerid)
{
mutePlayPauseUnmute(playerid);
}
function onYouTubePlayerAPIReady(playerid)
{
mutePlayPauseUnmute(playerid);
}
function onYouTubeIframeAPIReady(playerid)
{
mutePlayPauseUnmute(playerid)
}
function onPlayerReady(playerid)
{
mutePlayPauseUnmute(playerid)
}
function mutePlayPauseUnmute(playerid)
{
var player = document.getElementById(playerid);
player.mute();
player.playVideo();
player.pauseVideo();
player.unMute();
}
</script>
<iframe id="quotedVideo1" type="text/html" width="246" height="160" src="https://www.youtube.com/embed/NWHfY_lvKIQ?modestbranding=1&rel=0&showinfo=0&autohide=1&iv_load_policy=3&theme=light&enablejsapi=1&playerapiid=quotedVideo1" frameborder="0"> <!-- Magic Comment --> </iframe>
However, upon inspection, neither onYouTubePlayerReady, onYouTubePlayerAPIReady, onYouTubeIframeAPIReady, onPlayerReady, nor mutePlayPauseUnmute is ever called. What have I done wrong? According to https://developers.google.com/youtube/js_api_reference#onYouTubePlayerReady it looks like it should work, but it doesn't.
You're confusing two different player APIs here.
Do you want to use the iframe player? If so, you'll want to look at: https://developers.google.com/youtube/iframe_api_reference.
Instead of defining onYouTubePlayerReady, you'll want to define the following method: onYouTubeIframeAPIReady, create your player, and then assign an onPlayerReady callback.
Make sure you're including the JavaScript for the iframe player API, in order for onYouTubeIframeAPIReady to be called:
var tag = document.createElement('script');
tag.src = o.protocol + "://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
Worth noting from the doc, since you're writing the iframe instead of using JavaScript to do that for you:
If you do write the tag, then when you construct the
YT.Player object, you do not need to specify values for the width and
height, which are specified as attributes of the tag, or the
videoId and player parameters, which are are specified in the src URL.
Also, in your mutePlayPauseUnmute function..
playerid.mute();
playerid.playVideo();
playerid.pauseVideo();
playerid.unMute();
You'll want to trigger the actual the methods on the player as opposed to the playerid as described above.