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).
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'm trying to figure out if a video was played/paused via play() and pause() javascript methods.
I thought I could achieve this by observing the 'play' and 'pause' events checking if isTrusted was false. Up to no avail, this always comes true.
Is there any way for me to know if a video was played or paused due to an user interaction?
Fiddle
__
extra:
I have even tried videoElement.dispatchEvent(new MouseEvent('click')) but this doesn't seem to trigger the play/pause events of the video
As mentioned in the comments there are two separate things you can observer here:
changes in video state
user interactions, via mouse clicks etc
user interactions via the keyboard using the 'onkeydown' (replaces the deprecated 'keypress' event)
You may want to monitor and relate all for completeness but the simplest way would seem to be to simply monitor clicks of the UI Play/Pause button itself.
If you are able to use a HTML5 video player for your solution rather than the 'raw' view tag, you can leverage it's event handling for the UI which may be more convenient. For example for VideoJS you have the ClickableComponent (https://docs.videojs.com/clickablecomponent#handleKeyDown):
handleKeyDown(event). button.js, line 107
This gets called when a Button has focus and keydown is triggered via a key press.
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.
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.