JW player, if you hide the control bar you can click the video to play and pause, this works fine in desktop.
When I tested this in ipad it plays but touching it again doesn't pause the video.
Verify with this URL, https://support.jwplayer.com/customer/portal/articles/1406723-basic-video-embed
**Dont use the control bar as I need it disabled.
If you hide the JW controls, then the player should also not react to clicking on the video as a means to start/stop unless you specifically add code to tell it to.
For this to happen you need to attach a function to the onDisplayClick event listener as follows:
**JW6 version**
jwplayer().onDisplayClick(function(){
jwplayer().play();
});
**JW7 version**
jwplayer().on('displayClick',function(){
jwplayer().play();
});
Just calling the play() method in this way will handle the toggle of play/pause states - you don't need to manage this yourself.
I tried to do it in proper way but that doesn't seem to work alright, this is the only solution works for me,
$('.video-wrapper').on({ 'touchend' :
function(){
if(dtjwplayer.getState() !== 'paused') {
dtjwplayer.pause(true);
}
}
});
This is a very basic requirement where people wants to disable the control bar, Please let me know if there is any better way to do it.
Related
I have a Vimeo iframe embed on a mobile site, and am trying to figure out how to detect when the user presses the "Done" button in the native iOS Safari video player.
I know this is possible with the "webkitendfullscreen" event if you are embedding with a video tag directly (as described here):
$('video').bind('webkitendfullscreen', function()
{
console.log('on webkit close');
});
However, the video object is not accessible in the case of a foreign iframe embed.
I have not, so far, been able to find a good way to get this to happen, after quite a lot of keyboard-head-banging. I really hope Vimeo adds a way to do this in the future. The only thing I have found is in their new JS API, there is an event fired when the video has ended, and you can latch on to that and do something if they watch the video all the way to the end. You can also detect when the user pauses the video and do something after a "reasonable" time-frame, depending on what you are trying to do.
My hope was that I would be able to close the corresponding modal window whenever someone closes out of a video, but that was really not a possibility.
you can use the leavepictureinpicture event
myPlayer.on("leavepictureinpicture", () => console.log("leave pip triggered"));
https://github.com/vimeo/player.js/blob/master/README.md#leavepictureinpicture
Is there any way to hide only Next and Previous buttons in AVPlayer while playing a video
You can only either hide them all or show them all via the AVPlayerViewController showsPlaybackControls property, so what I would recommend doing is using an open source or third party library or framework that controls AVPlayer for you.
Such as what's suggested by this related question, which ultimately points to this GitHub project. You can then remove or hide the controls you don't want to be visible.
Alternatively, you could create your own controls that call into, and control, AVPlayer.
=> you can get notification when ply or pause and stop
when you got notification of play at that time you can hide both next and preivios button
I'm not sure what the problem is. I have a video that I'd like to play in a modal dialog.
I have everything set up and working fine on all devices. The only issue that I've been unable to overcome is that the video will not play a second time on iOS devices.
http://c4sandbox.com/video/index.html is a simple demonstration of the problem that I'm having. If you close the dialog (it will auto close when the video ends) then click the 'show again' link on an iOS device, then the video player is just an empty black box.
What am I missing? This happens in Safari and Chrome, but only on iOS.
EDIT: The problem appears to be with video.js because a straight html5 video tag will play the video multiple times as expected. Unfortunately, I need the flash fallback so html5 only is not an option.
I'm having a similar issue. The way I am getting around it is using the player's dispose() method to kill the instance and re-injecting the HTML for the player and re-instantiating it.
Thanks #Victor! your solution works. Since there is no example code given, here is the code I used.
//Init
videoPlayer = _V_("video_post", {
controls:true,
preload:"auto",
autoplay:true,
}, function(){
});
after you're done with the player (e.g. closes the video dialog), dispose the player
videoPlayer.dispose();
Done. hope this helps.
I want to embed youtube video in my website. My requirement is that the player should have only three options: play, pause and refresh. I want to disable the progressbar slider so that viewer can not move forward or backward.
I used the parameter "controls=0", but it removes the progressbar completely. I just want to disable the dragging functionality.
Anybody knows how to do this?
setting autohide=2 should do it.
https://developers.google.com/youtube/player_parameters#autohide
The HTML5 <video> tag offers the user a button to toggle on and off the fullscreen mode on Safari for mobile devices (iOS).
I would like to capture and handle this user action but it doesn't seem to raise an event when the button is pressed and the player enters the full screen mode.
Here is the link to the Safari API for the HTMLVideoElement class:
https://developer.apple.com/documentation/webkitjs/htmlvideoelement
We can easily find out when the video is paused of played in Javascript, like this:
function onload()
{
var player = document.getElementsByTagName("video")[0];
player.addEventListener('play',videoPlayHandler,false);
player.addEventListener('pause',videoPauseHandler,false);
}
However they don't seem to have any events for when the video enters the full screen mode.
We can force the video into fullscreen mode in response to user action by calling the webkitEnterFullscreen(), but that doesn't help me. I need to know when the user taps on the fullscreen button.
Hiding the controls and replacing them by my own custom controls sounds like a really long winded solution.
Another option I can think of is to set a timing event, constantly checking for the webkitDisplayingFullscreen property, but that feels like a bad thing to do in terms of memory management.
Can anyone suggest a better solution?
After much faffing around a friend finally pointed me in the right direction.
The events I was looking for are: webkitbeginfullscreen and webkitendfullscreen
var player = document.getElementsByTagName("video")[0];
player.addEventListener('webkitbeginfullscreen', onVideoBeginsFullScreen, false);
player.addEventListener('webkitendfullscreen', onVideoEndsFullScreen, false);
With that I can safely capture when the user clicks over the fullscreen button on Safari for the iPads. Interestingly the same events don't seem to work for Safari on the iMac (tested on version 5.1.2).
Thanks Apple for their inconsistency and hours of wasted time.