I'm trying to make a video (or anything else) go into a fullscreen mode in the Edge browser through JavaScript. But I can't get it to work. In Chrome everything works as expected.
I tried all steps in the js command line tool. The correct html video element is fetched with the line document.getElementById("video_player");. Then I tried to enter the command video.requestFullscreen();, but it's not doing anything. Not even an error :(
I have activated the fullscreen API in the about: flags settings and I've turned off all browser extension.
The HTML video element is not inside an <iframe>
EDIT:
This is my full code. The js file is loaded at the end of the HTML document. As you can see it's not doing much right now.
console.log("Running");
var video = document.getElementById("video_player");
FullScreenStart();
function FullScreenStart(){
console.log("AutoFullScreen started");
console.log(video);
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
} else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
}
}
function FullScreenOn(){
console.log("FullScreen activated");
}
function FullScreenOff(){
console.log("FullScreen deactivated");
}
document.onwebkitfullscreenchange = function(evt) {
if(document.webkitIsFullScreen){
FullScreenOn();
} else {
FullScreenOff();
}
};
Please, can somebody help me to get this to work? I've wasted two days on this problem now.
I made a test with your above posted code.
I find that your code will not work in any browser, If you call the fullscreen api using code.
I am not sure, how it works on chrome as you said in original post.
If you refer the documentation than you can find information below.
Note: This method must be called while responding to a user interaction or a device orientation change; otherwise it will fail.
Reference:
Element.requestFullscreen()
As said in the documentation, Method get failed in both Chrome and Edge if I call it from code but it works if user try to call it using button click.
Example code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Fullscreen with JavaScript</h2>
<p>Click on the button to open the video in fullscreen mode.</p>
<button onclick="openFullscreen();">Open Video in Fullscreen Mode</button>
<p><strong>Tip:</strong> Press the "Esc" key to exit full screen.</p>
<video width="100%" controls id="myvideo">
<source src="rain.mp4" type="video/mp4">
<source src="rain.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<script>
/* Get the element you want displayed in fullscreen */
var elem = document.getElementById("myvideo");
/* Function to open fullscreen mode */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
</script>
<p>Note: Internet Explorer 10 and earlier does not support fullscreen mode.</p>
</body>
</html>
Reference:
HTML DOM requestFullscreen() Method
It was done intentionally, Because if it get work from code than so many sites starts showing pop ups without asking permission from user. Which can be annoying for user.
Related
I figured out how to make a video full screen on click for desktop devices, however, the same code doesn't work on mobile devices. How can I make it work for mobile screens as well? This is my js code:
<script>
var myVideo = document.getElementById('videoplay');
myVideo.addEventListener('click', function () {
if (myVideo.requestFullscreen) {
myVideo.requestFullscreen();
}
else if (myVideo.msRequestFullscreen) {
myVideo.msRequestFullscreen();
}
else if (myVideo.mozRequestFullScreen) {
myVideo.mozRequestFullScreen();
}
else if (myVideo.webkitRequestFullScreen) {
myVideo.webkitRequestFullScreen();
}
myVideo.play();
}, false);
</script>
The fullscreen API is not supported for all mobile devices. https://caniuse.com/#feat=fullscreen
You can use Screenfull to avoid all the checks and complexities to handle the fullscreen experience. It exposes a property isEnabled which tells you if you are allowed to enter fullscreen. You can request fullscreen based on its value.
Maybe you got a 'playsinline' in your Videotag?
Just remove it
myVideo.removeAttribute('playsinline');
if I have a site that has a flash header, but it's not mobile friendly on apple products and even some androids, what is the javascript code I can insert into my .html page so that it doesn't show this when it is loaded...
What I'm trying to fix:
You can try using HTML5's innerHTML option with JavaScript to check whether Flash is available or not. From that info, you could then show alternative content like some image file if the device cannot display an .swf file (Flash app).
Since you did not show any code of your own page header setup, I'll show a basic example and maybe you can apply logic to your own page.
Put code in blank document (edit widths/heights) and save as .html.
In your browser block Flash and refresh... it shows image banner.
In your browser **enable* Flash and refresh... it shows Flash banner.
Test this code and ask any questions for clarification:
<!DOCTYPE html>
<html>
<body>
<div id="my_Banner"></div>
</body>
<script>
var show_A = '<embed width=600 height=200 src="https://www.w3schools.com/tags/helloworld.swf">';
var show_B = '<img width=600 height=200 src="https://www.videocopilot.net/blog/wp-content/uploads/2013/03/trap.jpg"/>';
function isFlashEnabled()
{
var flash = navigator.plugins.namedItem('Shockwave Flash');
if (!flash) { return 0; }
else { return 1; }
}
if( isFlashEnabled() ) //if Flash is availabe as browser plugin
{ document.getElementById('my_Banner').innerHTML = show_A; }
else //if Flash not availabe as browser plugin (eg: on mobile browsers)
{ document.getElementById('my_Banner').innerHTML = show_B; }
</script>
</html>
I want to autoplay video in fullscreen. I searched and found out that Fullscreen API can be used to do this and found out that code similar to this can be used.
viewFullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
This code works fine. But this will need some triggering event like mouse click or some keyboard input. But is it possible playing a video automatically in fullscreen without any triggering event as soon as the html file is opened?
Nope. From MDN:
NOTE: Fullscreen requests need to be called from within an event handler or otherwise they will be denied.
I am trying to display a video in fullscreen when the user clicks on a link/button. This is working fine in desktop but not working well on iPad using chrome.
According to this http://caniuse.com/fullscreen there are some restrictions but i can't find chrome/ios on that table.
If somebody tells me that it's an operative system restriction I will really appreciate a link from a nice source.
Here's some code:
HTML:
<video id="video1" width="420" controls>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />Your browser does not support HTML5 video.</video>
<button onclick="PlayFunction();">PLAY</button>
Javascript:
function PlayFunction()
{
launchFullScreen(document.getElementById("video1")); // any individual element);
$("#video1")[0].play();
}function launchFullScreen(element) {
if (element.requestFullScreen) {
element.requestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else {
alert("no cai en ningun lado");
}
}
JSfiddle: http://jsfiddle.net/9aSjn/16/
According to this link http://www.mobilexweb.com/blog/chrome-ios-android-4-1-jelly-bean-html5 :
That’s is because Chrome for iOS is not Chrome. What?? It has a
Chrome-style UI, onmibox, search by voice and it has Chrome synching.
However, the rendering and execution engine are not Chrome.
I called them pseudo-browsers and you can see my opinion and a good
discussion on the comments area in my previous post. So Chrome for iOS
is in fact using the iOS Web View that share most of the code with
Safari.
The User Agent that Chrome for iOS is using is the Safari one with one
addition: “CriOS” (Chrome for iOS I guess). There is no “Chrome” word
inside the User Agent, so if you are doing something special for
Chrome, you are safe and it’s not going to be executed on Chrome on
iOS.
Conclusion, when you are using Chrome on iOS you are using Safari, and that's why it doesn't appear in the caniuse table.
I'm trying to launch a popup window from a Javascript function and ensure it has focus using the following call:
window.open(popupUrl, popupName, "...").focus();
It works in every other browser, but IE8 leaves the new window in the background with the flashing orange taskbar notification. Apparently this is a feature of IE8:
http://msdn.microsoft.com/en-us/library/ms536425(VS.85).aspx
It says that I should be able to focus the window by making a focus() call originating from the new page, but that doesn't seem to work either. I've tried inserting window.focus() in script tags in the page and the body's onload but it has no effect. Is there something I'm missing about making a focus() call as the page loads, or another way to launch a popup that IE8 won't hide?
The IE8 is not allowing this feature because of security issues
Windows Internet Explorer 8 and later. The focus method no longer brings child windows (such as those created with the open method) to the foreground. Child windows now request focus from the user, usually by flashing the title bar. To directly bring the window to the foreground, add script to the child window that calls the focus method of its window object
http://msdn.microsoft.com/en-us/library/ms536425%28VS.85%29.aspx
You might try this. Not sure if it will work though>
var isIE = (navigator.appName == "Microsoft Internet Explorer");
var hasFocus = true;
var active_element;
function setFocusEvents() {
active_element = document.activeElement;
if (isIE) {
document.onfocusout = function() { onWindowBlur(); }
document.onfocusin = function() { onWindowFocus(); }
} else {
window.onblur = function() { onWindowBlur(); }
window.onfocus = function() { onWindowFocus(); }
}
}
function onWindowFocus() {
hasFocus = true;
}
function onWindowBlur() {
if (active_element != document.activeElement) {
active_element = document.activeElement;
return;
}
hasFocus = false;
}
Yeah I can't test this on IE8 at the moment either but have a play with this document.ready method instead of the body.onload:
test1.html:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function openNewWindow()
{
window.open("test2.html", null, "height=200, width=200");
}
</script>
</head>
<body>
<a onclick="openNewWindow()">Open</a>
</body>
</html>
test2.html:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ window.focus(); });
</script>
</head>
<body>
<div id="container" style="background:blue;height:200px;width:300px">
</div>
</body>
</html>
I figured out what the issue was - turns out the reason running window.focus() in the onload wasn't working was because the first window.open().focus() call caused it to start flashing in the background, and after that any subsequent focus calls wouldn't work. If I don't try to focus it from the calling window but only from the popup it comes to the front normally. What an annoying "feature"...
The problem is the Window.focus method does not work in Internet Explorer 8 (IE 8). It's not a pop up blocker or any settings in IE 8 or above; it's due to some security I believe to stop annoying pop-ups being brought back up to the top.
after a lot of hair pulling and googling i found the following:
Microsoft suggest updates but this doesn't appear to work plus how do they seriously expect me to ask all of the users my site to update their machines!
so I've come up with this work around or fix.
What i do with the window is:
first I check if the window is open
if it's open, close it
open a new fresh version of the window on top.
javascript code to include at header or in separate file:
function nameoflink()
{
var nameofwindow = window.open('pagetolinkto.htm','nameofwindow','menubar=1,resizable=1,width=350,height=250');
if (nameofwindow) {
nameofwindow.close();
}
window.open('pagetolinkto.htm','nameofwindow,'menubar=1,resizable=1,width=350,height=250');
return false;
}
link on the page:
Click Here to go to name of link
Tested in MS Windows 7 with IE8 not sure of exact version.