I have a div in html
<div id="player"></div>
In the JS file I have the following code
var player = new YT.Player("player", {
height: '0',
width: '0',
playerVars: {
'showinfo': 0,
'rel': 0
},
events: {
'onStateChange': onPlayerStateChange
}
});
$scope.playVideo = function(videoURL) {
player.loadVideoByUrl($sce.getTrustedResourceUrl(videoURL));
};
function fullScreen() {
var e = document.getElementById("player");
e.requestFullscreen();
}
function onPlayerStateChange(event) {
switch (event.data) {
case -1:
fullScreen();
break;
default:
break;
}
};
The problem is that when I click on a button, I call the playVideo() function. It eventually calls the fullScreen() function and the video runs fullscreen.
The video starts from the beginning and not from the specified start time in the URL.
Example call:
$scope.playVideo("https://www.youtube.com/embed/Xy_7q1xMnOg?start=60");
I expect the video to start playing from 61st second and in fullscreen.
It is playing in fullscreen but it is starting from the beginning.
Am I missing something? Or please let me know if you need more information.
Related
I'm trying to make a webpage that will load a given Youtube playlist and play a random video from it.
I'm struggling getting the playlist information from the API as when I run
player.getPlaylist()
the API returns an array of one element (the currently cued video) every time, regardless of the cued video or playlist.
My JavaScript is an almost 100% copy/paste from the API documentation and I can't work out why I can't get the full list of videos in the playlist.
<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',
playerVars: {
listType: 'playlist',
list: 'PLbIZ6k-SE9SiarIg09JXUdK2kDX5_OB25',
autoplay: 0,
controls: 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
console.log(event.target.getPlaylist());
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED && !done) {
done = true;
console.log('Video Finished');
stopVideo();
}
}
function stopVideo() {
player.stopVideo();
}
</script>
Can anybody lend a hand and point to my mistake or in the right direction?
It seems the playlist is not actually cued when loaded this way but only the first video. This is confirmed by getPlaylist() returning only one video and the onStateChange event not firing once the player has loaded.
We can however force the player to cue the playlist with cuePlaylist(). What is described below can be seen in this JSFiddle.
We modify the constructor to load nothing:
playerVars: {
autoplay: 0,
controls: 1
},
We modify onPlayerReady() to cue the playlist:
function onPlayerReady(event) {
event.target.cuePlaylist({
listType: 'playlist',
list: 'PLbIZ6k-SE9SiarIg09JXUdK2kDX5_OB25',
});
}
We modify onPlayerStateChange() to check for the CUED state and get the playlist when it fires:
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.CUED) {
console.log(event.target.getPlaylist());
}
if (event.data == YT.PlayerState.ENDED && !done) {
done = true;
console.log('Video Finished');
stopVideo();
}
}
After which the console outputs this:
Array [ "j_OyHUqIIOU", "PK8dsAeMmPk", "lfvceHUBWnU", "Xz5z1hBxejg",
"OubvTOHWTms", "5WKU7gG_ApU", "XjwO9InuFJk", "lNqChN3WHh8" ]
I have 2 working scripts, the first using the youtube player api:
(#container_home contains a logo showing after the video ends)
$(document).ready(function() {
$("#container_home").hide();
$("#player").hide();
});
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
controls: 'false',
videoId: 'kCdFqMJPqyQ',
playerVars: {
'showinfo': 0,
'rel': 0,
'controls': 0},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
$("#player").fadeTo( "fast" , 1);
$(".jay_load").hide();
}
function onClick(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
$("#player").hide();
$("#container_home").show(2000);
}
}
And the second tells me if I'm using a desktop computer or another device (using wurfl script):
$.getScript("//wurfl.io/wurfl.js")
.done(function() {
$.wurfl = WURFL;
if ($.wurfl.form_factor === 'Desktop') {
alert ('yes');
};
});
So my goal is to run the youtube script only on desktop browsers.
I tried to copy the first script and paste it over
alert ("yes");
But thats not working. I hope someone can help me.
Thanx!
so I'm loading a youtube playlist using:
event.target.loadPlaylist(videoIds);
and I'm getting this error:
The weird part is the playlist loads fine for about one second,
and then breaks giving me that error.
sorry heres the surrounding code:
window.tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
window.firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
// window.player;
window.onYouTubeIframeAPIReady = function() {
player = new YT.Player('player', {
height: '480',
width: '853',
playerVars: {
controls: 1,
modestbranding: 1,
playsinline: 1,
showinfo: 1,
iv_load_policy: 3,
rel: 0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
window.onPlayerReady = function(event) {
//wierd 404 errors sometimes
event.target.loadPlaylist(videoIds, 0, 0, 'large');
event.target.playVideo();
}
window.onPlayerStateChange = function(event) {
console.log('the state changed: '+ event.data);
if (event.data === 1) {
console.log(event.target.getDuration());
globalYoutubePlayerCounter++;
console.log('youtube player count: ' +globalYoutubePlayerCounter);
}
if (globalYoutubePlayerCounter >= 6) {
/* load the next set of videos */
globalYoutubePlayerCounter = 0;
console.log('playlist ended');
if (that.finalTrackList.length > 0) {
that.getNextTenMusic(event.target);
}else{
// recall for general searches;
// that.getNextTenGeneral(event.target);
}
/* load the next set of videos */
}
}
All video list is formatted correctly even when I get the error.
Console.log confirms this.
I had the same issue but with loadVideoById. For me, the problem was that the player hadn't fully initialized and therefore there really was no method loadVideoById. Maybe if someone faces the same problem, try postponing the call and see if that helps.
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.
How do I set the youtube embedded player to unmute upon clicking it. You can see the embedded player i'm referring to at http://www.harvestarmy.org home page. It's the one at the right where it says "Latest Videos from YouTube. I set it up to be muted by default, but I want it to automatically unmute when someone clicks it.
Here is the code I used:
<!-- 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');
// This is a protocol-relative URL as described here:
// http://paulirish.com/2010/the-protocol-relative-url/
// If you're testing a local page accessed via a file:/// URL, please set tag.src to
// "https://www.youtube.com/iframe_api" instead.
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: '98',
width: '175',
playerVars: {
'list': 'UUFwY5Al1Doy7f0MdKnJ-gaw',
'modestbranding': 1,
'showinfo': 0,
'autoplay': 1
},
events: {
'onReady': onPlayerReady
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.mute();
}
</script>
Thank you for that answer! I implemented it a little differently, adding it to the onYouTubeIframeAPIReady function.
I also reversed the initialized value of the isUnMuted variable. Functionally it is the same, but makes more sense this way.
var player;
var isUnMuted = false;
window.onYouTubeIframeAPIReady = function() {
player = new YT.Player('youTube', {
videoId: '[myVideoId]',
playerVars: {
'rel': 0,
},
events: {
'onReady': function() {
player.mute();
player.playVideo();
},
'onStateChange': function () {
if (player.isMuted() && player.getPlayerState() == 2 && !isUnMuted) {
player.unMute();
player.playVideo();
isUnMuted = true;
}
}
}
});
}
This mimics closely the behavior of embedded videos in a Facebook newsfeed.
I don't think it is possible, because there is not such thing as a 'click' or 'activate' event. However, you may try adding an event handler to the "onStateChange" event and unmute and unpause your player. I haven't tried it, but give it a try and see if this works:
var isUnMuted = true;
player.addEventListener("onStateChange", function(event) {
if( player.isMuted() && player.getPlayerState() == 2 && isUnMuted ) {
player.unMute();
player.playVideo(); // resume playback
isUnMuted = false; // you want to run this once only!
}
});
This works. But unfortunately the pause icon fades in when the video is clicked. Even the video continues to run it is not a clean solution.
I fixed it by placing a <div> with exactly the same size above the actual video iframe and use its click() function to unmute the video.
HTML:
<div class="video-container">
<div class="video-dummy">
</div>
<div id="player">
</div>
</div>
CSS:
.video-container {
position: relative;
width: 640px;
height: 390px;
}
.video-dummy {
width: 640px;
height: 390px;
position: absolute;
}
Javascript:
$('.video-dummy').click(function(){
player.unMute();
});
This works out well for me.