For youtube videos you there is a button to exit fullscreen for both the Flash and HTML5 versions. Is there a way to programmatically exit fullscreen on video complete using Javascript? So basically once the video ends I want it to exit fullscreen mode.
What you need is the following:
document.exitFullscreen()
Here you can read more about the Fullscreen API
The short answer, is NO. At the moment, there is no way to programatically exit from Youtube player 100% safe, But there is a workaround that IS 100% safe.
Basically what you need to do is follow a series of simple steps and it will work fine in ALL browsers:
Step 1: Put your Youtube code inside an invisible DIV, lets say it is called "codeholder".
Step 2: Put a visible DIV as holder for the invisible DIV. This is where the code will go, let's say its called "ytPlayer".
Step 3: When the page loads, copy the invisible DIV into the visible DIV. This can be done for example as follows:
document.getElementById('ytPlayer').innerHTML = document.getElementById('codeholder').innerHTML;
Step 4: I'm assuming you are using the Youtube API, so, when the YouTube.PlayerState.ENDED event is fired (or whenever you want), copy the invisible DIV into the visible DIV. This will force the browser to close the player to close fullscreen and it will display the original player.
I like to do this on YouTube.PlayerState.ENDED event because this is a destructive way to close the player, so, the video will NOT continue playing after "exiting" full screen.
However, the Youtube API allows you to "read" the playing position, and you can restore the playing position easily with some light coding. There will be a pause of a fraction of a second though.
Related
I want to create (or use a pre-existing) HTML video player that stops users from skipping the video and restarts the video if the tab loses focus. Are there any suggestions or tips for this? I truly don't know where to start and some brief Google research yields no helpful results. (A similar program is like EdPuzzle, only I want mine to restart the video upon losing focus.)
I was trying to stop a video on Safari for iOS, when the browser goes in background. I was able to do that through Page Visibility API.
On iOS's home screen, if I open the Control Center and press play button, it normally plays the last Safari's content.
What I'm trying to achieve is a Youtube Web mobile-like behavior: it is able to prevent this behavior. If you close Safari with a tab running Youtube, you are not able to press play in the control center and play the content.
I've already tried e.preventDefault() behavior on event.
I've tried to insert flags in pageshow/pagehide (as I found in another SOW answer, but these events seems to not being called on background running.
Also, I wasn't able to control that through the Page Visibility API and inserting flags in it's callbacks: even if events gets called when going in background, "overriding" HTMLMediaElement.play() does not work and the problem concerns iOS's Control Center.
It is like it does not use HTMLMediaElement.play()...
Does anyone have a clue on how to override Control Center's "Play button" behavior from web? Thank you.
It seems like Youtube fully unloads the content when the browser goes on the background and reloads the content starting at the point the user "interrupted".
I decided to follow the same way.
Moreover, the same iOS behavior seems to happen also on Android notification center (when Chrome shows you a tab is reproducing audio).
I have recently seen a play button in the tab menu which triggers an action in that page. (When opening a youtube video in a new tab)
Here is a picture of it:
Does anyone know how to add such a button?
(Picture made in Firefox Developer Edition - 57.0b13)
That is a browser feature, you can't "add" it, but it will automatically be displayed when you have an audio or video element on your site that is playing sound, giving users the possibility to mute and unmute sound for the specific tab.
You don't have to implement the icon by yourself. Chrome or any other modern browser automatically displays that icon when that specific tab makes a sound.
But if you want to implement a button by yourself,
You would want to alter the 'title' of the page with a Unicode icon when you start playing a sound. Not very practical method though.
I'm implementing the Coldfusion <cfmediaplayer> tag for playing flash videos on a touch-screen based local web application. I am aware that by default the user is able to simply tap the video itself to pause/play the video.
I am also aware that <cfmediaplayer> has a built-in control panel through the use of the controlbar="true" attribute, but the problem is the buttons are way too small for a touchscreen and I don't want the user to be able to access any other controls.
To combat this, I disabled the controlbar and tried to add a custom play/pause button below the player to essentially mimic the actions of touching the video itself. My problem is that I cannot find a way to simply pause the video... the only Javascript functions I could find are:
ColdFusion.Mediaplayer.stopPlay and ColdFusion.Mediaplayer.startPlay
The issue is that ColdFusion.Mediaplayer.stopPlay restarts the video from the beginning and not from where the video currently is.
Is there any way around this? As a last resort I will simply stick the play/pause button in the corner of the video to hint to the user that they can touch the video screen to enable those actions, but I'd rather have a separate button so as not to obstruct the user...
Thanks in advance.
Thanks to #Miguel-F for his help.
We have figured out that <cfmediaplayer> does NOT have pausing functionality by default, and only has the ability to Play or Stop the video entirely and restart from the beginning of the clip.
Looks like workarounds are required (or other methods of showing the videos entirely).
I have recently put an advertising box that overlays the embedded videos on my website. Users are forced to click the "CLOSE TO PLAY" button in order to close the advertisement overlay and play the video.
See it in action here: http://www.animefushigi.com/ao-no-exorcist-17/4
The problem: I have been getting complaints from PS3 users that the Close to Play button is not working on the PS3 browser, thus they are stuck with the ad overlay.
The button's javascript is as follows:
$(document).ready(function(){
$(".btn").click(function() {
$(this).closest(".olBlock").toggleClass("display");
});
});
Any suggestions on how to fix this?
The problem is, in the PS3 Browser (NetFront 3.1), the Flash plugin (video player) receives the Click event, instead of the HTML overlay.
Therefore, the only solution is to have a close clickable element outside the bounds of the Flash object, such as moving the "Close to play" psuedo button just after the video player. For aesthetics, you may prefer to leave the close button where it is & add the typical "[x]" close element in the top right corner, positioning this just above the Flash player.
If you need to test for the PS3 browser (may not be necessary, if you include the "[x]" element for all browsers), the user agent string includes "PLAYSTATION 3", so you could test for it on the client as follows:
var isPs3Browser = (navigator.userAgent.indexOf("PLAYSTATION 3") >= 0);
As far as I can tell, the jQuery.browser object can not be used to check for the PS3 browser, especially as the object may be deprecated.