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
Related
I can't find a simple yes/no answer - maybe my inability to ask the right question. I'm probably not seeing the obvious.
https://developers.google.com/youtube/iframe_api_reference
If I set-up the iframe api example as per the linked page, with an appropriate header (e.g. viewport etc.) then when I view the page in Chrome on the desktop, I can click on the video area to play, and pause the video. I do not need to use the play/pause control.
If I view the same site on my Note 4, I can touch the video area to play. But in order to pause, I have to click on the (now tiny) pause control. Touching the video area does nothing.
I know I can programmatically add some other element and initiate a pause via the API ... but I don't think I can add a touch or onclick event to the player ... and the player state change event won't be any good if the player isn't changing state on subsequent touches?
Yes / No (trying to keep within non-vague / discursive guidelines) ... is it possible, without "hacks" to pause the video, on mobile, with a touch to the video area?
I suspect not, as YouTube's own site, on my Note 4, behaves in the same way. I just can't find any discussion/questions about it. I ask the question, as it seems counter-intuitive to reduce the control area on a smaller touch device for pausing. It's annoying to me ... trying to use embedded YouTube in CSS3D where I have a video-wall 2x2 and the controls become tiny. I might have to overlay a transparent control element for touch but just want to check I haven't gone mad.
Just a quick question on this and how I can get a youtube video to stop playing when exiting a modal.
We have this homepage slider > https://www.bababing.com/
You can see that when you click on a tile in the slider it opens and starts playing the video. However, when you exit it still plays the video.
Is there anyway we can stop his happening that anyone knows of?
We are using fancy box to open the lightbox area.
Upon the video opening I also want it to autoplay the videos
Any thoughts would be fantastic
Thanks,
Glen
You have youtube player code inside inline content, but the script literally moves your content into the modal and puts back after closing. Therefore, if user interacts with your content, it stays the same after closing the modal.
You have several options:
1) You could use Youtube API to stop/start videos after content is displayed/hidden;
2) Display cloned version of your content (e.g., something like $.fancybox.open( $('my-element').clone(true) ); ), but then you probably still would need to use Youtube API to start video;
3) Build your own content on click event - something like $.fancybox.open( 'there will be youtube iframe code with autoplay option and something more' ); - this way you will avoid messing with Youtube API
4) Use direct links to Youtube like https://www.youtube.com/watch?v=_sI_Ps7JSEk&autoplay=1 - the script will then parse it and load inside iframe automatically
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.
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.
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.