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
Related
I'm trying to create a custom player for some Soundcloud tracks. The idea is to hide the Iframe and create a few players to play different tracks. The loading and playing all works fine but I have two challenges.
How do I create a progressbar (SC.Widget.Events.PLAY_PROGRESS)
How do I create a download link?
A snippet from the way I'm coding this:
(function(){
var widgetIframe = document.getElementById('sc-widget'),
widget = SC.Widget(widgetIframe);
widget.bind(SC.Widget.Events.READY, function() {
$('#play').click(function(){
widget.play();
});
}); }());
To bad the OPEN API is closed..
If you are trying to stream tracks using a custom player, I recommend you do not use the widget at all. Rather, use the streaming SDK directly. There are methods there that can do everything you need to load, play, pause, seek, get the current time of the song and more.
To initialize the streaming player, you can do something like:
SC.initialize({
client_id: "<client id>"
});
SC.stream("/tracks/" + song_id).then(function (player) {
player.play();
}
To build the actual progress bar, you can do something inside your stream function like the following (this example uses JQuery but you don't need to):
player.on("time", function () {
var current_time = player.currentTime();
var current_duration = player.options.duration;
$(".scrubber .scrubber_fill").css("width", ((current_time / current_duration) * 100) + "%");
});
I'm trying to create a plugin that'll add a sharing button to the videojs player's overlay when the user hovers over or pauses the video -- basically I want my element to fade in over the player when the controlBar is show and fade out when it's hidden. My hackish solution is to listen for the player's "controlsvisible" and "controlshidden" events and calling fadeIn/Out on my element when those trigger.
Is that the best hook I have available, or is there a preferred method?
Sample:
videojs.plugin('shareButtons', function(options) {
var shareBtn;
shareBtn = $('<span class="icon-share"></span>share');
shareBtn.click(function() {
return alert("share");
});
$(this.el()).append(shareBtn);
this.on("controlsvisible", function() {
return vjs.Component.prototype.fadeIn.call($("#player-share"));
});
return this.on("controlshidden", function() {
return vjs.Component.prototype.fadeOut.call($("#player-share"));
});
});
I'm actually in the process of updating this. You can see the CSS in my branch here:
https://github.com/heff/video-js/blob/feature/control-bar-fixes/src/css/video-js.less
You'll be able to use events (useractive/userpassive) or CSS classes (vjs-user-active/vjs-user-passive).
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 added this script in my site to reproduce video playlist.
<script type="text/javascript" src="swfobject.js"></script>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
var params = { allowScriptAccess: 'always',
allowFullScreen: 'true' };
var atts = { id: 'myytplayer' };
swfobject.embedSWF("https://www.youtube.com/v/videoseries?listType=playlist&list=PLBA9E733B5C8314DE&autoplay=1&modestbranding=1&enablejsapi=1&playerapiid=ytplayer&version=3", "ytapiplayer", "640", "360", "8", null, null, params, atts);
function onYouTubePlayerReady(myytplayer) {
ytSwfPlayer = document.getElementById( 'myytplayer' );
ytSwfPlayer.setShuffle(1);
}
</script>
the setShuffle function don't work!!!
You can suggest me a solution?
This appears to be a bug in the player. I've reported this bug to the team. In the future you can report bugs at https://code.google.com/p/gdata-issues/issues/entry?template=YouTube%20(Defect%20Report)
As a work around you could use the JS api to shuffle it yourself. When a video ends you can call playVideoAt and pass a random number.
The problem is that if you've loaded a playlist queue in the Youtube player, the next track will automatically start at the end of the current playing one.
So you should bind track ended event (which is event.data = 0) and then make the youtube player make two things:
stop playing
play a new track with a random index by calling playVideoAt method.
A simple solution to avoid repeating the same track more times is to store the played idx in a list. Then, you should have a function, like shuffle that generates a random integer between 0 and the queue length:
function getRandomId() {
var random_id = 0
while(played_idx.indexOf(random_id) != -1) {
random_id = Math.floor(Math.random * playlist.length)
}
return random_id
}
Then, simply call playVideoAt(random_id).
I've noticed that setShuffle does work if you launch the command a little later. Something like this:
function onPlayerReady(event) {
event.target.mute();
setTimeout( function() {
event.target.setShuffle(true);
event.target.setLoop(true);
}, 2000);
}
If you launch it directly, it will definitely not work (I have noticed, to my frustration).