I'm trying to implement a youtube player using angular 4, but I'm only able to create it using javascript code. Follow the 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);
var player;
setTimeout(
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
},3000);
and in the component.ts of the page that I want the player to play I import the code:
import '../../apiyoutube.js';
the problem is that I want to use some events that I want to recover from the database and etc, so I wanted to manipulate the attributes of this code in services and in the component that use typescript. How do I access attributes of this code in isolation? I already tried to give up but ... how can I create this player using typescript?
obs: I put a setTimeOut because in this way I imported the first angle executes the .js code and then renders the html, and the code could not access the id in the html page
Related
OK... been working on this for a couple of months with no working results as of yet... So, now asking for help! I have a YouTube playlist, ID: PLl_KM23gznEAZW-INW8ty4QNaHH8JCnNW. This playlist has close to 1500 videos on it. I am needing a code that will call the list, and play a random video from the list. and I need it to play all 1500 videos in a random order without repeating any of the videos. then after the playlist is completed, it needs to start over, continuing to play the videos in a completely different random order.
I have tried several code snippets and can't seem to get it all to come together. I either get a shuffle with repeats, or I get just a list that doesn't play anything, or it will randomly pick the first video, then maybe the second one, but it will start playing in order from either the first or the second video. And the current youtube player that is working will only call the videos in a 200 song list. IE: if the payer starts in order, only will play 1 through 200, then stop. Or, I can set it to start with any song in the playlist, for instance, # 999, it will go to that video, but will only play videos fromm 999 to 1198.
I have to randomly pick the song and put it in my code to get it to do that.
I need it to start in shuffle mode, choosing any song from the list of 1500 videos, then continue randomly choosing and playing any other video within the list except those that have already played, until it has played all the videos, then loop the playlist and continuing to play a random video from the playlist in no certain order, including the order it just played. My main thing to avoid... having to create the list array manually. I need to be able to call the url of the playlist, and retrieve a list of the videos either by number, video ID, name of the song, etc. Using the easiest, cleanest code.
PS: having comments in place is extremely helpful for my learning process.
And please don't worry about anything, I am 51, disabled, and trying to remind myself of the coding syntaxes after getting a degree in 2003 and not using a bit of it since! I am working on a project for myself, more or less trying to get myself back into being able to read, repair, and create coding for myself. This part though, has me totally stumped!
I hope this is making sense to someone, I'm getting confused just trying to ask the question!!!
tried this one, got nothing... just a blank 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);
function onYouTubeIframeAPIReady() {
var player = new YT.Player("player", {
height: '390',
width: '640',
events: {
'onReady': function (event) {
event.target.cuePlaylist({list: "PLl_KM23gznEAZW-INW8ty4QNaHH8JCnNW"});
event.target.playVideo();
setTimeout(function() {
event.target.setShuffle({'shufflePlaylist' : true});
}, 1000);
}
}
});
}
this one will load the player, but doesn't shuffle or play randomly. just starts with the first video, then continues in order...
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',
events: {
'onReady': onPlayerReady
},
playerVars: {
listType:'playlist',
list: 'PLl_KM23gznEAZW-INW8ty4QNaHH8JCnNW'
}
});
}
function onPlayerReady(event) {
num = _.random(0, 1500);
setTimeout(() => {
player.playVideoAt(num);
}, 1000);
}
this one will start with a random video, but then continues in order from there...
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
var numPl = Math.floor((Math.random() * 1500) + 1);
var player = new YT.Player("player", {
height: '390',
width: '640',
playerVars: {
listType:'playlist',
list:'PLl_KM23gznEAZW-INW8ty4QNaHH8JCnNW',
index: numPl,
autoplay: 1,
},
events: {
'onReady': function (event) {
event.target.cuePlaylist({list: "PLl_KM23gznEAZW-INW8ty4QNaHH8JCnNW"});
event.target.playVideo();
setTimeout(function() {
event.target.setShuffle({'shufflePlaylist' : true});
}, 1000);
}
}
});
}
function onPlayerReady(event) {
event.target.mute();
setTimeout( function() {
event.target.setShuffle(true);
event.target.setLoop(true);
}, 2000);
}
function getRandomId() {
var random_id = 0
while(played_idx.indexOf(random_id) != -1) {
random_id = Math.floor(Math.random * playlist.length)
}
return random_id
}
I'm pretty sure there were more, but can't find them at the moment.
My page has several youtube player, it caused the page loading slowly.
This is my code↓
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player1', {
height: '100%',
width: '100%',
videoId: 'mCx3oxXBmGA'
});
player2 = new YT.Player('player2', {
height: '100%',
width: '100%',
videoId: 'SpWR0sSEgMc'
});
the HTML↓
<div id="player6"></div>
There are 12 video in this page, how can I optimized it?
Do not embed all 12 players at once. Instead present some cover image of the YouTube movie (static img) and bind click event on it.
When user will click specific image, remove it from the DOM and create player instead of it.
I have a code with Javascript to play Youtube videos instead of iframe but I don't know how. Do I pass the video id from a PHP script variable or a bbcode like [youtube]videoid[/youtube]?
I just need to pass down the video code to this function. So please help me and maybe this may have discussed here but I could not find it (maybe I don't know what exactly I have to search for).
Here is the code:
<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);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE', // remove if assign in php
events: {
}
});
}
</script>
Or assign videoId: in php.
videoId: <?php echo json_encode($videoId); ?>,
JSON-encoding is compatible with JavaScript and will take care of any escaping and what not that may need to be done.
How about directly outputting the variable?
videoId: <?php echo json_encode($vIdVariable); ?>,
I am creating an interactive video site and have this function:
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 done = false;
var player;
function videoChosen(btnid) {
player = new YT.Player('player', {
height: '390',
width: '640',
playerVars: { 'autoplay': 0, 'controls': 0,'autohide':2,'disablekb':1,'modestbranding':1,'fs':0 },
videoId: btnid,
events: {
'onStateChange': onPlayerStateChange
}
});
}
But I can't find a way to change the video player position (it keeps loading on the top left side of the browser). Is there a way using CSS targeting the player that was summoned using the function?
It looks like possibly you're missing the div for your player, i.e
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
Have a look at this link. Your player will take the place of this div, as it says. So, place the div where you want the player.
Hope this helps.
Having problems getting a Chromeless player with autoplay to work. The code I am trying was copied directly from the developers.google.com documentaiton:
https://developers.google.com/youtube/youtube_player_demo
IFRAME Example: http://jsfiddle.net/BN6Sa/
<iframe width="720" height="405" src="//www.youtube.com/embed/M7lc1UVf-VE?feature=player_embedded&autoplay=1&controls=0&loop=1&modestbranding=1&rel=0&showinfo=0&theme=light" frameborder="0" allowfullscreen></iframe>
JS Example: http://jsfiddle.net/7DWTU/
<div id="ytplayer"></div>
<script>
// 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.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '405',
width: '720',
videoId: 'M7lc1UVf-VE',
autoplay:1,
controls:0,
loop:1,
rel:0,
showinfo:0,
theme:'light'
});
}
</script>
When using the iFrame API, anything that's a player object parameter (i.e. something that you might append as a URL parameter if you were to embed the player just as an iFrame rather than with the API) needs to be set as part of the playerVars parameter object rather than as a direct parameter to the YT.Player argument. Specifically, your code should look like this:
<div id="ytplayer"></div>
<script>
// 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.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '405',
width: '720',
videoId: 'M7lc1UVf-VE',
playerVars: {
autoplay:1,
controls:0,
loop:1,
rel:0,
showinfo:0,
theme:'light'
}
});
}
</script>