Having trouble getting Video.js SWF to work on Internet Explorer?

I've been working with video.js and am having trouble getting it to function properly on Internet Explorer. I have added the swf file like this:

videojs.options.flash.swf = "http://vjs.zencdn.net/4.2/video-js.swf "

Here is the code for the video player:

<video id="video" class="video-js vjs-default-skin"
    controls preload="none" width="760" height="433"
    data-setup='{"example_option":true}'>
    <source src="img/0.mp4" type='video/mp4' />
    <source src="img/0.webmhd.webm" type='.webmhd.webm' />
    <source src="img/0.oggtheora.ogv" type='video/ogg' />
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>

The mp4 file uses h.264 encoding.

Any ideas on what could be causing the issue? If more code needs to be included in this message, just let me know! Thanks so much!

javascriptinternet-explorer

Answer №1

To fix compatibility issues with IE9, follow these steps:

Begin by adding the following code to your header:

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

Next, insert the video player code specifically for IE9:

<video id="my_video_1_ie" class="video-js vjs-default-skin video-ie9" controls preload="none" width="478" height="358" poster="......">
       <source src="....." type='video/mp4' />
</video>

Make sure to only use the mp4 format for this particular video.

If you have another video tag, include it as follows:

<video id="my_video_1" class="video-js vjs-default-skin video-ie9" controls preload="none" width="478" height="358" poster="......">
       <source src="....." type='video/mp4' />
</video>

<script>
  _V_("my_video_1");
</script>.

You can then use a conditional comment to add a style sheet for IE9 in order to hide or show the video accordingly.

This method may seem clunky and require more bandwidth, so consider disabling auto-load for a smoother experience.

Source: Video.js Forum

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

Avoid page refreshing when retrieving data using PHP and AJAX

In my current program, I am able to add data and insert it into the database. However, I am looking for a way to automatically send this data to another page or browser without refreshing. I have two browsers open, so how can I submit the data to the other ...

javascriptphphtmlmysqlajax

Utilizing nested grouping in mongoose schemas

I am facing a challenge while attempting to execute a nested group query in MongoDB. Is there a way to group data by both date and campaign ID, ensuring that each campaign ID contains a nested array of creatives with their respective data (views and clicks ...

javascriptnode.jsmongodbmongoose

Managing the appearance of one DOM element using another DOM element

Hey there, I'm currently working on an Angular Material tooltip implementation. When I hover over my span element, the tooltip appears. Now, I'm wondering how I can dynamically change the background color of the tooltip based on certain condition ...

javascripthtmlcssangularangular-material2

Do you want to reset the validation for the paper input?

I am encountering an issue with a paper-input element in my code. Here is what it looks like: <paper-input id="inputForValidation" required label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-input&g ...

javascripthtmlpolymerpolymer-1.0web-component

Efficient ways to clear all input fields within a React div component

import "./App.css"; import { useState } from "react"; import { useSelector, useDispatch } from "react-redux"; import { addUser} from "./features/Users"; function App() { const dispatch = useDispatch(); const use ...

javascriptreactjsredux

What is the most effective way to transfer a variable between two javascript files?

I am currently working on customizing the code from a github repository found at Github repo for integration with Google App Engine. However, I have encountered an issue when trying to pass a variable from /app.js to /books/crud.js. Although I have success ...

javascriptnode.jsexpressgoogle-app-enginegoogle-cloud-platform

Tips for obtaining the dynamically loaded HTML content of a webpage

I am currently attempting to extract content from a website. Despite successfully obtaining the HTML of the main page using nodejs, I have encountered a challenge due to dynamic generation of the page. It seems that resources are being requested from exter ...

javascripthtmlnode.jsphantomjs

When trying to access a URL in a next.js application using the fetch() function, the router encountered an

I recently started working on a frontend project using Next.js v13.4 app router, with an additional backend. I have organized my routes and related functionalities in the api folder within the app directory. However, when I attempt to use the fetch() funct ...

javascriptreactjsnext.jsfetch-apiapp-router

Guide on duplicating a Select2 element integrated with Django and Python

I am facing an issue where the select element inside a div is not cloning correctly. The Select2 element does not retain the loaded values from the Django code when cloned. Is there a way to clone the div with all the Select2 element values intact? Current ...

javascriptdjangojquery-select2

Tips for adjusting the horizontal position of a grid item within a map() loop

I am trying to align the text in my Timeline component from Material Ui always towards the center of the timeline. The TimelineContent contains Paper, Typography (for title and description), and an image. Currently, I have multiple TimelineContent element ...

javascriptcssreactjsmaterial-ui

Is there a glitch in the Selenium Java CSS Selector functionality?

Everything seems to be working smoothly with that code! It successfully locates and clicks on my button within the span tag. driver.findElement(By.cssSelector("span[id$=somePagesCollection] a")).click(); However, after clicking the button, an input field ...

javascripthtmlcssselenium

What is the best way to implement this design using CSS or JavaScript?

I would like to enhance the appearance of my school website during these challenging times of the pandemic by adding some CSS or JavaScript elements. However, I am unsure how to go about it. ...

javascripthtmljquerycssvue.js

The presence of a Bootstrap addon is resulting in horizontal scrolling on mobile devices within the webpage

I am encountering a peculiar issue with an input-group in my cshtml file which features a Bootstrap addon. The problem arises on mobile devices, where upon focusing on the input field, the page scrolls horizontally to the right, revealing the right margin ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

In React Native, you can pass native component properties as props, while also defining custom ones using a TypeScript interface

I am working on a component called AppText where I need to utilize a Props interface and also be able to accept additional props that can be spread using the spread operator. However, I encountered this error: Type '{ children: string; accessible: tru ...

javascriptreactjstypescriptreact-native

How can you efficiently transfer the expression utilized in v-for from the template to the component code?

How can I extract the expression within the template that is contained in :class? <div v-for="(user, index) in users" :key="index" :class="{'bg-yellow-lighter': infoWindowMarker && infoWindowMarker.position.lat === user.posit ...

javascriptvuejs2

Is it possible to simultaneously run two Node.js projects on Windows?

Is it possible to run two Node.js projects on a Windows operating system? If so, what is the process for doing that? If not, can I run two Node.js projects on a dedicated host instead? ...

javascriptnode.jsdedicated-server

jQuery offset(coords) behaves inconsistently when called multiple times

I am attempting to position a div using the jQuery offset() function. The goal is to have it placed at a fixed offset from another element within the DOM. This is taking place in a complex environment with nested divs. What's puzzling is that when I ...

javascriptjquerycss

The "next" button on my carousel is unresponsive and the automatic transitioning feature is not working

I'm having trouble implementing a carousel on my website. The next/previous buttons and automatic slides are not functioning properly. <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <!- ...

javascriptcarousel

A guide on navigating through an array nested within an object

I have been diving into the world of ReactJS, experimenting with different APIs to fetch and manipulate data. Currently, I am working with the Flickr API which returns data structured as "An array inside an object". { "photos": { "page": 1, "page ...

javascriptreactjs

Unlock the Power of Typescript: Using the Browser Console to Access Functions

Scenario Within the file ts/app.ts, the following function exists: function foo() { console.log('Hello Word'); } After successful compilation with Webpack, it generates a file named bundle.js. To load this file, use the following script tag ...

javascripttypescriptwebpack