I have an HTML5 video tag with the attributes autoplay loop muted playsinline. In iOS the video stops playing, if the user switches to another browser tab. However it doesn't start again when switching back.
I tried listening for different events such as window.onfocus() and then manually starting the video with the play() method, however these events do not seem to fire, until the user actually clicks inside the document again, and so they are virtually useless in this case.
This site has an HTML5 video tag in the hero: https://www.stoxenergy.com/en/technology/
However that one keeps playing, even when the user switches tabs.
I can't figure out how they do it. Any ideas?
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 am creating a chrome extension that will automatically pause a youtube video when I switch to another youtube video tab. I am using onplay event to trigger a message to the background script to pause the currently playing video in the unfocused tab. The problem is it only works like 50% of the time when a new video tab is opened or reloaded (it always work on manually pressing play button).
video.onplay = function() {
console.log("onplay");
chrome.runtime.sendMessage({status: "played"});
};
Why is the onplay event unpredictable like this? Is there any way I can get this around or is there something I am missing?
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.
Is it possible to know when user click on advertisement on youtube video?
We used youtube api v2 in our website, and user can watch videos.
Problem : when user click on advertisement , youtube video pause automatically.
My Task is to make youtube video continuously play even if user click on advertisement,
It should only pause when user click on pause button.
is there any solution?
To do this you need to capture the event (click) prior to the handler being fired.
If these are two separated handlers then you probably CAN do this. Just find/remove the one handler on page load. Or you may be able to insert a lower-level handler that just stops the event from propagating upwards.
IF the event handler that launches the ad also pauses the video, then no you can't keep the video playing while the user is in an ad. However, you may be able to add a second handler that ALSO launches, which resumes the video. It'll result in a hiccup, but users probably won't complain.
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).