Using Internet Explorer to watch full-screen HTML 5 videos

I am in the process of developing my own HTML 5 Browser Player. Everything seems to be working well, except for getting the full screen feature to function properly in IE 10. Chrome, Safari, and Firefox are all doing great with it.

Unfortunately, my JavaScript skills could use some improvement, so if someone could kindly explain things to me in a simpler manner, I would greatly appreciate it.

I have come across information on certain websites suggesting that IE does not support Full Screen. However, I am able to go Full Screen using the browser player controls on IE10. (I have to say Microsoft really needs to step up their game and catch up with the rest!)

If anyone has any tips or suggestions, please share! Thank you in advance!

Below is the code I currently have for my full screen function:

function toggleFullScreen() {
    if(vid.requestFullScreen) {
        vid.requestFullScreen();   
    } else if(vid.webkitRequestFullScreen) { 
        vid.webkitRequestFullScreen();   
    } else if(vid.mozRequestFullScreen) { 
        vid.mozRequestFullScreen();
    }
}
javascriptinternet-explorerhtml5-videofullscreen

Answer №1

Up until version 11, Internet Explorer did not support the Full Screen API.

For those using IE10 and below who want a similar effect, you can achieve it by toggling an element between position: static and position: fixed. When the element has fixed positioning, you can set its width to 100% and height to 100%.

This is how YouTube's HTML5 player for IE accomplishes fullscreen viewing mode.

In addition, it seems possible to trigger the F11 key press from JavaScript to bring the browser window into full screen.

var wscript = new ActiveXObject("Wscript.shell");
wscript.SendKeys("{F11}");

By combining these two methods, this might be the closest IE can come to emulating the Full Screen API.

Answer №2

According to a source I came across, Internet Explorer does not have support for the Full Screen feature.

It seems that full screen functionality will only be available in IE11 and later versions based on this site.

But then why am I able to access Full Screen mode through the browser's player controls on IE10?

This is possible because those controls are built-in and not reliant on the full screen API.

Answer №3

Internet Explorer 11 does indeed offer support for it and performs admirably, even outshining Chrome in certain scenarios. However, there is a known bug related to iframes:

More information on the iframe bug can be found here

Answer №4

It's important to note that IE11 also requires a vendor prefix for fullscreen functionality: msRequestFullscreen()

To ensure full cross-browser compatibility, consider using the following code snippet:

var vid = document.getElementById('videoID');
if (vid.requestFullscreen) {
    vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
    vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
    vid.webkitRequestFullscreen();
} else if (vid.msRequestFullscreen) {
    vid.msRequestFullscreen();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Obtain permission from Azure Graph to fetch details for a specific user using their principal

Here is the Node.js code snippet: const GraphkManagementClient = require('azure-graph'); client = new GraphkManagementClient(credentials, tenantId); client.users.get(principalID); The last line triggers an error message: Authorization_Reques ...

javascriptnode.jsazureazure-active-directoryazure-ad-graph-api

What is the best way to implement rate limiting or throttling on a Strapi API?

Our company relies on a simple strapi API implemented in node.js and hosted on Heroku. Despite our efforts, we have not been able to find a solution to implement rate limiting, as it appears that Heroku does not offer throttling add-ons and strapi lacks bu ...

javascriptnode.jsapistrapithrottling

Simulated external prerequisite

//user.js const database = require('database'); exports.createUser = function(req, res){ let user = req.body; if( validateUser(user) ) { database.insertUser(user); //redirect } else { //render new page with the user data ...

javascriptnode.jsexpressmocha.js

When working with angular.js and angular-sanitize.js, the src attribute is removed from JSON HTML data

I'm new to Angular and I'm really enjoying learning how to work with it. Currently, I have a simple JSON file that contains text structured like this: "gettingstarted":{ "title":"Getting Started", "content":"<img ng-src='i ...

javascripthtmljsonangularjs

JavaScript code to generate a UTF8 string from UTF codes

I am in possession of the byte representation of UTF8, such as: 195, 156 for "Ü" (capital U Umlaut) I am struggling to generate a JavaScript-compatible string from these numbers - all my attempts have been unsuccessful. Every method I have tried has mis ...

javascriptutf-8

Most efficient method to upload numerous images without any lag

I have a website where images are loaded only when they are slightly below the viewport. This method allows the site to load initially without images and then determine which ones need to be loaded based on the user's viewpoint. When a user scrolls ...

javascripthtmlimage

Enhancing a Pie Chart Dynamically with Ajax using Highcharts

I need assistance with updating the data for the pie chart when a list item is clicked. The issue arises when using dynamic values from $cid in data.php. For example, user_student.cid = 1 works correctly, but if I use user_student.cid = $cid, it doesn&apos ...

javascriptphpjqueryajaxhighcharts

I'm encountering an issue where I receive the error `Cannot read property 'map' of undefined` while attempting to integrate the backend with React. What could be causing this error and how

I'm currently learning React and I've been using a tutorial here to connect my database to the front end of my React application. Unfortunately, every time I try running 'npm start' at 'localhost:3000' in express-react/backend ...

javascriptnode.jsreactjs

Conceal part of the page initially, then reveal it when clicked

After integrating Rails 3 and JQuery, I encountered an issue where a div containing a rendered partial would not hide when attempting to do so using JQuery in my JavaScript. I want to be able to hide the div initially, then show it upon clicking a button. ...

javascriptjqueryajaxruby-on-rails-3

Passing an ID via Link to retrieve data with getServerSideProps in Next.js

I have several alert components. From each of these components, I aim to pass the itm._id and receive it in [itm].jsx within the same folder. In [itm].jsx, I intend to utilize it in the getServerSideProps function for fetching data. Below is a snippet fro ...

javascriptreactjsnext.js

Updating parameters in Node.js with mongoose

script.js var mongoose = require('mongoose'); var Schema = mongoose.Schema; var scriptSchema = new Schema({ status: {type: String, default: 'INCOMPLETE'}, code: String, createdDate: {type: Date, default: Date.now}, user: {t ...

javascriptnode.jsmongodb

The user is defined, but the user's user ID is not specified

It seems that the user is defined, but user.user_id is not. My framework of choice is express.js and passport.js. router.post('/requestSale', function(req,res){ console.log('session user: ' + req.session.passport.user); //logs ...

javascriptexpresspassport.js

Is the `beforeEach` function in Jasmine synchronized?

Is it guaranteed that multiple beforeEach functions will always run sequentially? beforeEach(function() {}); beforeEach(function() {}); beforeEach(function() {}); beforeEach(function() {}); beforeEach(function() {}); It appears they do. I conducted a tes ...

javascriptjasmine

Setting up Supertest and Express together is leading to a timeout error

In my server.test.js file, I have a straightforward setup: import 'regenerator-runtime/runtime'; const request = require('supertest'); const express = require("express") const app = express(); app.get('/user', func ...

javascriptnode.jsexpressjestjssupertest

How can I best access the object being exposed on the webpage using <script type="text/json" id="myJSON">?

In our current project, we are successfully using AMD modules to organize and structure our code. One idea I have is to create an AMD module that accesses a script tag using a jQuery ID selector and then parses the content into JSON format. Here's an ...

javascriptjqueryjsonunderscore.js

Difficulty encountered while deploying a React application on Netlify

I followed the instructions on a Medium link to deploy my React application on Netlify: To set up the production mode, I utilized an express server for defining build scripts. After creating the build scripts on my local machine, I uploaded them to the Ne ...

javascriptreactjsnpmcreate-react-appnetlify

Creating a unique JavaScript script that gradually adjusts the background color using the setTimeout() function

Is there a way to create a function that continuously changes the background color every 15 seconds by picking colors from an array that starts over once all colors have been used, without having the function run just one time? $(document).ready(() => ...

javascriptjquerycss

What is the best way to establish a client.js file for socket.io in Node.js?

I am looking to separate the client script from the index.html file in the chat application example found at https://socket.io/get-started/chat/. Currently, I am facing an issue where the message "a user connected" is not appearing when I refresh the webpa ...

javascriptnode.jsexpresssocket.ioclient-server

Incorporating Common Types for Multiple Uses

Is there a way to efficiently store and reuse typings for multiple React components that share the same props? Consider the following: before: import * as React from 'react'; interface AnotherButtonProps { disabled?: boolean; onClick: (ev ...

javascriptreactjstypescript

What is the process for creating a dynamic URL, such as example.com/profile/CroatiaGM?

I am in the process of developing a user control panel, and I have encountered some difficulties with creating a dynamic profile link. For instance, how can I achieve something like example.com/profile/CroatiaGM? Given that my website is primarily coded ...

javascriptphp