I currently have a blog that plays background music when you load the page using a youtube iframe:
<iframe id="background-music" width="0" height="0" src="https://www.youtube.com/embed/VOR8reYWvx8?rel=1&autoplay=1&enablejsapi=1" xframeborder="0" allowfullscreen></iframe>
I have imported the youtube iframe api manually as well:
<script src="http://url_to_script/iframe_api.js"></script>
I have other songs on my blog and I want to pause the background song whenever I play one of the other songs on there. I have the following code, per the instructions on https://developers.google.com/youtube/iframe_api_reference#Examples, but it doesn't work at all.
$(".tumblr_audio_player").contents().find('.play_button').click(function()
console.debug(YT);
player = new YT.player("background-music", {
events: {
'onReady': function() { console.log("player is ready") },
'onStateChange': function() { console.log("player has changed state"); }
}
});
player.stopVideo();
I am not sure what I am doing wrong. I don't know if onReady and onStateChange are required (I don't need them), but it doesn't work without the second object parameter so I'm not sure what I'm supposed to do.
Well, I figured out what was going on. The code is mostly correct, however, initializing the YT.Player object takes time which is exactly what the onReady callback is for.
It makes sure that the YT object is initialized before you do anything. If you put the pauseVideo in the onReady callback, it will work properly. So to answer my original question, onReady is absolutely necessary:
player = new YT.Player("background-music",
{ events: {
onReady: function() {
player.stopVideo();
}
}
});
Related
I would like to show the big play button at the end of the video, so user can replay it easily.
It seems that this big play button is shown by default (every posts I read are for hidding it instead of showing it...), but it is not the case for me...
I have tried to edit the following function (in video.dev.js file) but nothing has changed :
vjs.Player.prototype.onEnded = function(){
if (this.options_['loop']) {
this.currentTime(0);
this.play();
}
else { // I am not using loop mode
this.bigPlayButton.show();
this.pause();
}
};
Thanks for your responses.
There are a few ways you can do this. You can show the button when the video ends with the API:
videojs("myPlayer").ready(function(){
var myPlayer = this;
myPlayer.on("ended", function(){
myPlayer.bigPlayButton.show();
});
});
Or if you do want to modify video.dev.js you just need to uncomment the line that does the same thing:
vjs.BigPlayButton = vjs.Button.extend({
/** #constructor */
init: function(player, options){
vjs.Button.call(this, player, options);
if (!player.controls()) {
this.hide();
}
player.on('play', vjs.bind(this, this.hide));
// player.on('ended', vjs.bind(this, this.show)); // uncomment this
}
});
Or with CSS you could force the button to be showed whenever the video is not playing (ended or paused):
.video-js.vjs-default-skin.vjs-paused .vjs-big-play-button {display:block !important;}
The posts you've seen about hiding it probably refer to version 3 of video.js, as with that the play button was shown at the end.
Place this code after the videojs code. Works great. It not only shows the poster and the big play button, but also allows you to re-play the video again and again:
<script type="text/javascript">
var vid = videojs("YOUR-VIDEO-ID");
vid.on("ended", function()
{
vid.posterImage.show(); //shows your poster image//
vid.currentTime(0);
vid.controlBar.hide(); //hides your controls//
vid.bigPlayButton.show(); //shows your play button//
vid.cancelFullScreen(); //cancels your fullscreen//
document.mozCancelFullScreen(); //cancels your fullscreen in firefox//
});
vid.on("play", function() //function to play the video again//
{
vid.posterImage.hide(); //hides your poster//
vid.controlBar.show(); //shows your controls//
vid.bigPlayButton.hide(); //hides your play button//
});
</script>
The only thing I can't get to work is the exit fullscreen with firefox... But I don't know what else to do.
I don't know why but I cant get the answers mentioned here to work, maybe it's because I am on a newer version of the player, so doing things like vid.posterImage.show() is not doing anything for me.
On version 5.19.2 (current release), I was able to reset the player to it's default state (before the play button is pressed by the first time) by setting hasStarted to false on the event listener "ended".
example:
var player = videojs('player');
player.on("ended",function(){
player.hasStarted(false);
});
That brings back the big button, the poster, and hides the controls.
I created this plugin to "reset" the player and show the big play button and the video's poster
https://github.com/brianpkelley/video-js-4-plugins/blob/master/showPosterAtEnd/videojs.showPosterAtEnd.js
I read the entire API and dozens of related help topics but I dont manage to get with the code to help me do what I want.
This is what I need:
The video is muted by default.
When user click on fullscreen button the video is played with full volume.
How do I code this?
I understand I can mute my video adding myPlayer.volume(0) like this:
<script>
var myPlayer = _V_("video_1");
myPlayer.volume(0);
</script>
But how do I detect whether the video is in fullscreen or not?
I found the fullscreenchange event on the API but dont manage to implement it successfully. Any help will do my day. Thank you!
Listen for the fullscreenchange event and check the isFullScreen property of the player.
var myPlayer = _V_("video_1");
myPlayer.volume(0);
var onFullScreen = function(){
if (this.isFullScreen) {
this.volume(1);
} else {
this.volume(0);
}
};
myPlayer.addEvent("fullscreenchange", onFullScreen);
https://github.com/zencoder/video-js/blob/master/docs/api.md
I'm using jquery ui tabs and video.js. I want to stop the video when I go to another tab and reset it when I come back to second tab.
As of VideoJS v4.6 you can do the following to reset the player:
player.pause().currentTime(0).trigger('loadstart');
That loadstart is the key which shows the poster image and rebinds the first play event.
u can use this for show poster or show bigplay button
$( '.backlink' ).click( function() {
// Player (this) is initialized and ready.
var myPlayer = _V_("video9");
myPlayer.currentTime(0); // 2 minutes into the video
myPlayer.pause();
myPlayer.posterImage.el.style.display = 'block';
myPlayer.bigPlayButton.show();
});
It's even easier.
let player = Video(el);
player.on('ended', () => {
player.initChildren();
});
First you need a reference to the video player.
http://videojs.com/docs/api/
var myPlayer = _V_("myVideoID");
Then you can use the API to start/stop/reset the video.
Stop:
myPlayer.pause();
Reset:
myPlayer.currentTime(0);
I'm not sure how the jquery tabs are set up, but you might be able to do:
$('.my-tab-class').click(function(){
myPlayer.pause().currentTime(0);
});
player.reset();
Life is simple.
Get the id of the video.just append _html5_api with the id since videojs appends these letters and then you could use pause and make currentTime equal to 0.
var videoStop = document.getElementById(videoId+"_html5_api");
videoStop.pause();
videoStop.currentTime= 0;
The solution I found was using the videojs api, invoke the reset function followed by initChildren for reconstruct the player structure, i'm using vesion 5.10.7.
videojs('sublime_video', {}, function () {
var videoPlayer = this;
videoPlayer.width(screen.width / 2);
videoPlayer.height(720);
videoPlayer.on("ended", function(){
videoPlayer.reset().initChildren();
});
});
I was looking for a way to reintialize the VideoJS plugin then I found this :-
var player = videojs('my-player');
player.on('ended', function() {
this.dispose();
});
Just dispose off the video and init again.
Source:- https://docs.videojs.com/tutorial-player-workflows.html#dispose
Is it possible through the YouTube API to fire an event when the video reaches a specified time? e.g. when the video reaches 20 sec. fire the event.
Thanks,
Mauro
not sure if you still need an answer to this (as I'm finding it 4 months later) but here's how I accomplished this with youtube's iframe embed api. It's ugly in that it requires a setInterval, but there really isn't any kind of "timeupdate" event in the YouTube API (at least not in the iframe API), so you have to kind of fake it by checking the video time every so often. It seems to run just fine.
Let's say you want to start up your player as shown here with YT.Player(), and you want to implement your own onProgress() function that is called whenever the video time changes:
In HTML:
<div id="myPlayer"></div>
In JS:
// first, load the YouTube Iframe API:
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// some variables (global here, but they don't have to be)
var player;
var videoId = 'SomeYoutubeIdHere';
var videotime = 0;
var timeupdater = null;
// load your player when the API becomes ready
function onYoutubeIframeAPIReady() {
player = new YT.Player('myPlayer', {
width: '640',
height: '390',
videoId: videoId,
events: {
'onReady': onPlayerReady
}
});
}
// when the player is ready, start checking the current time every 100 ms.
function onPlayerReady() {
function updateTime() {
var oldTime = videotime;
if(player && player.getCurrentTime) {
videotime = player.getCurrentTime();
}
if(videotime !== oldTime) {
onProgress(videotime);
}
}
timeupdater = setInterval(updateTime, 100);
}
// when the time changes, this will be called.
function onProgress(currentTime) {
if(currentTime > 20) {
console.log("the video reached 20 seconds!");
}
}
It's a little sloppy, requiring a few global variables, but you could easily refactor it into a closure and/or make the interval stop and start itself on play/pause by also including the onStateChange event when you initialize the player, and writing an onPlayerStateChange function that checks for play and pause. You'd just need to seperate the updateTime() function from onPlayerReady, and strategically call timeupdater = setInterval(updateTime, 100); and clearInterval(timeupdater); in the right event handlers. See here for more on using events with YouTube.
I think you may have a look at popcorn.js.
It's an interesting mozilla project and it seems to solve your problem.
Not sure if anyone agrees here but I might prefer to use setTimeout() over setInterval() as it avoids using event listeners, eg:
function checkTime(){
setTimeout(function(){
videotime = getVideoTime();
if(videotime !== requiredTime) {
checkTime();//Recursive call.
}else{
//run stuff you want to at a particular time.
//do not call checkTime() again.
}
},100);
}
Its a basic pseudocode but hopefully conveys the idea.
somewhat of a javascript novice here.
I'm trying to create this: http://i.imgur.com/LXFzy.png from the Spotify UI Guidelines.
Basically a 64x64 album cover with an appropriate sized play button.
This is what I have so far:
function DataSource(playlist) {
this.count = function() {
return playlist.length;
}
// make node with cover, trackname, artistname
this.makeNode = function(track_num) {
var t = playlist.data.getTrack(track_num);
// console.log(t);
var li = new dom.Element('li');
//generate cover image with play/pause button
var track = m.Track.fromURI(t.uri, function(a) {
var trackPlayer = new v.Player();
trackPlayer.track;
trackPlayer.context = a;
dom.inject(trackPlayer.node, li, 'top')
});
//track name
var trackName = new dom.Element('p', {
className: 'track',
text: t.name
});
//artist name
var artistName = new dom.Element('p', {
className: 'artist',
text: t.artists[0].name
});
dom.adopt(li, trackName, artistName);
return li;
}
}
This datasource function feeds into a pager function later in the code. This code generates image, artist name and track name just fine except I can't seem to get the image to be 64x64 without overriding with my own css. I'm sure there is a way to set this in javascript since the core Spotify CSS files include a class for it however I'm at a loss at how to do it.
Also the play button renders but gives an error in the console that the track has no method 'get' when I click on it. How am I suppose to know it needs a get? Is there some way I can see this player function so I know what I'm doing wrong with it?
Any help would be greatly appreciated, I'm sure it'll help droves of people too as there is no documentation anywhere I can find on how to do this.
Check the code here: https://github.com/ptrwtts/kitchensink/blob/master/js/player.js
The kitchensink app displays a lot of the Spotify Apps API functionality
For the playback button, I know that it doesn't seem to actually work for single tracks used as the context. It really only works if you use either an Artist, Album, or Playlist context. Not sure why that is.