A feature I am trying to implement in my rails app is the ability for users to control embedded youtube videos. I am using the youtube player api (guidelines here: https://developers.google.com/youtube/iframe_api_reference).
In the guidelines, it is always creating a new YT player:
// 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
}
});
}
My question is how can I play an already embedded youtube video with an outside 'play' button.
The error is on the player = new YT.Player line. I don't want to make a new player, just control the already embedded video.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('video', {
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event){
event.target.playVideo();
document.id("start").click(function () {
player.playVideo();
});
}
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
my iframe:
<iframe title="YouTube video player" id="video" width="540" height="290" src="http://www.youtube.com/embed/#{ youtube_id }?rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
header view with play button:
<div id="start">
<%= image_tag("playback_play.png") %>
</div>
(rails app)
if you need more code, let me know, thanks for the help!
Not a direct answer to your question, but a potential solution for you:
<div id="player"></div>
<div id="start" style="display: none;">
<%= image_tag("playback_play.png") %>
</div>
<script>
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '#{ youtube_id }', // not sure if you want that or <%= youtube_id %> in this case
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event){
//event.target.playVideo(); // commented out -- uncomment if you want autoplay
document.id("start").show();
}
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
Related
I am using the YouTube Iframe as shown below. I want to make my player load on the click of a button instead as soon as the API loads.
I have created a system where a user of my website will be able to choose what videos will be loaded into the playlist, so I cannot hardcode the YouTube video IDs. Is it possible to make an onclick function that fires an event that loads the player? If so, how??
Thanks so much!!!
<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: { //CAN I REPLACE THE ONREADY EVENT WITH ONE
'onReady': onPlayerReady, //THAT FIRES ONCLICK?
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
You can do something like code below
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 video_id = '' //Desired video ID
var player;
$('LOAD_BUTTON').on('click', function() {
// Load player when LOAD_BUTTON is clicked
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: video_id,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
});
function onPlayerReady(event) {
$('PLAY_BUTTON').on('click', function() {
// Play video when PLAY_BUTTON is clicked
event.target.playVideo();
});
}
I have videoIds[youtubeIDs] lined to play youtube videos in mysite which is working fine with the below code.
But when second video starts it lags 1-2 sec to load and the loading youtube icon shows up.
Is there any way to buffer the next video while playing the current video, which will reduce the loading time which results the next video starts instantaneously.
<div id="player"></div>
<script>
var youtubeIDs=["qdW21vNQB1E","EcVeqY2QuSI","UOV49oGr2pc"];
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 onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
playerVars: { 'autoplay': 0, 'controls': 0,'autohide':1,'wmode':'opaque' },
/*loadPlaylist:{
listType:'playlist',
list:youtubeIDs,
index:parseInt(0),
suggestedQuality:'small'
}, */
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
//event.target.loadPlaylist(youtubeIDs,parseInt(2),15,'large');
event.target.cuePlaylist(youtubeIDs,parseInt(0),15,'large');
//event.target.playVideo();
event.target.playVideoAt(0);
}
zzz=setInterval(function(){document.getElementById('bugbox').value =
player.getCurrentTime()}, 1000);
I play the video and I see the time in bugbox
When I click the button the video loads but setInterval don't show player.getCurrentTime(); in bugbox
onclick="document.getElementById('player').src='http://www.youtube.com/watch_popup?v=vt4X7zFfv4k'
First video is loaded from this code:
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;
idv='qV5lzRHrGeg';
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: idv,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
Edit:
Solved!
I use #NewToJS solution from the comment.
<div id=player></div>
<div id=playvideo style= "width:40px; height:80px; background-color:#2b2b2b;" >
<script src="https://apis.google.com/js/platform.js"></script>
<script type="text/javascript">
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', {
height: '448',
width: '763',
playerVars: {
'showinfo': 0,
'controls': 0,
listType: 'playlist',
list: 'PLD7SqVUGDdDBw_xmMKTDF5MlBwys_KlUk'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
// event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player.stopVideo();
}
}
</script>
I have an embed code like that, and I want the div named "playvideo" acts like YouTube's play button, I think it's an easy one but I'm new on JavaScript, can anybody have an idea?
Well you can use YouTube's Player API function:
player.playVideo()
So ... HTML:
<div id="mydiv" onclick="play_this_video()">Play my video</div>
and JavaScript:
function play_this_video(){
player.playVideo();
}
I was wondering that if I have a list of hyperlinks that each one is linked to a Youtube video and I have Youtube player API on the page
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', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
the question is how to make videoId take variables?
so if I have 10 links every time I click on a link the player display that video?
thanks
You do this with the YouTube IFrame Data API: https://developers.google.com/youtube/iframe_api_reference
You can use loadVideoById() or cueVideoById();
player.loadVideoById({
videoId: videoId,
startSeconds: startSeconds,
endSeconds: endSeconds
});