I want to autoclose (settimeout) an iframe which displays a video with delay 5 sec when the video ends and only if the user click play, if not I want to autoclose the iframe after 5 sec.
How can I do this using videojs?
I've tried setTimeout(function (), 5000); but it's not working.
Thanks
Did you try to add setTimeout on ended event ?
player.on('ended', function() {
alert('video is done!');
setTimeout(function (), 5000);
});
});
Related
I made custom feature to stop auto play when user hover on swiper. It is working but there is a problem. It won't stop immediately, instead of it has delay time = swiper's speed. How to stop it immediately. Please help me.
swiper.hover( function() {
swiper.autoplay.stop();
}, function() {
swiper.autoplay.start();
} );
How would you detect if say the letter 'a' on the keyboard is pressed... and if it is, perform an action where you click and hold at the mouse location for 1 second? I'm completely new to Opera Extensions and I'm not even sure how to run the script in the Opera browser.
EDIT: Changed JavaScript to Opera Extension.
show keycode number
$(function () {
$(document).keyup(function (e) {
$('body').text(e.keyCode);
});
});
now
$(function () {
$(document).keyup(function (e) {
if(e.keyCode==65){ //letter a
//some code
}
});
});
I'm using the Tooltip() from Twitter-Bootstrap. When hovered over an element, a tooltip shows up. But it stays there unless you move your mouse away from it.
How can I make it dissapear after a few seconds it popped up, in stead of waiting until mouse moves away from the element?
Bootstrap provides methods for manipulating tooltips such as $('#element').tooltip('hide')
If you add the data-trigger='manual' attribute to your elements, you can control how the tooltip is shown or hidden.
$('.bstooltip').mouseenter(function(){
var that = $(this)
that.tooltip('show');
setTimeout(function(){
that.tooltip('hide');
}, 2000);
});
$('.bstooltip').mouseleave(function(){
$(this).tooltip('hide');
});
Fiddle
If multiple mouseEnter and mouseleave event happen within delay time 'hide' is called multiple times and may be the tooltip closes earlier than expected. Older calls must be discarded.
$('.bstooltip').on('shown.bs.tooltip', function () {
var that = $(this);
var element = that[0];
if(element.myShowTooltipEventNum == null){
element.myShowTooltipEventNum = 0;
}else{
element.myShowTooltipEventNum++;
}
var eventNum = element.myShowTooltipEventNum;
setTimeout(function(){
if(element.myShowTooltipEventNum == eventNum){
that.tooltip('hide');
}
// else skip timeout event
}, 2000);
});
Fiddle
setTimeout would only work once for the first tooltip, we need to use setInterval instead.
This works for me perfectly fine with Bootstrap 4 Tooltips
$(document).ready( function () {
$('[data-toggle="tooltip"]').tooltip();
setInterval(function () {
$('[data-toggle="tooltip"]').tooltip('hide');
}, 2000);
});
The tooltip would appear and disappear after 2 seconds.
Here is simple Answer
$(selector).tooltip({title:"somthing~", trigger:"hover", delay:{hide:800}, placement:"top"});
only give hide parameter in delay option.
it work fine also focus event not click event(I don't know why..)
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'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