Video Element Is Not Displaying In Ie8?

July 02, 2024 Post a Comment

I want to embed video element in all browsers,but its working fine in all browsers except IE8.Here, i am using mediaelement.js library to implement.

Solution 1:

First, a couple of things to try:

Make sure Flash is installed on IE8. It's the fallback for Mediaelement.js in older browsers.
Make sure you place all scripts and css inside the <head> tag. It will not work from <body> in IE6-8.
Try going to Mediaelement's website or the link below. They should work fine in IE8 with flash installed, and if they're not, then it's probably a local problem with your browser.

I put together a working example in IE8 below.

Example on JSBin.

IE version 8.0.6001.18702
jQuery version 1.10.2
Mediaelement.js version 2.13.2

Relevant code

<head><scriptsrc="http://code.jquery.com/jquery-1.10.2.min.js"></script><metacharset="utf-8"><title>JS Bin</title><scripttype="text/javascript"src="http://mediaelementjs.com/js/mejs-2.13.2/mediaelement-and-player.min.js"></script><script>jQuery(document).ready(function($) {
            var player = newMediaElementPlayer('#player1');
        });
    </script></head><body><videoid="player1"src="http://techslides.com/demos/sample-videos/small.mp4"width="320"height="240"></video></body>

Working in IE8

enter image description here

Solution 2:

Practical Cross-Browser HTML5 Audio and Video

In older browsers, the <video> won't render, but it will display text between the tags, for example;

Baca Juga

<video id="video1" width="640" height="360" >
  <source src="video.mp4"type="video/mp4">
  <source src="video.webm"type="video/webm">
  <p>Please update your browser</p>
</video>

Will display "Please update your browser".

Support for everybody

To allow visitors with non-HTML5-ready browsers to play the video, you can provide an alternative with Flash embedded that plays the same MP4 you supply for Internet Explorer 9, Safari and Chrome. For example;

<videoid="video1"width="640"height="360" ><sourcesrc="video.mp4"type="video/mp4"><sourcesrc="video.webm"type="video/webm"><objectwidth="640"height="360"classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"><paramname="SRC"value="player.swf?file=video.mp4"><embedsrc="player.swf?file=video.mp4"width="640"height="360"></embed><p>Please update your browser or install Flash</p></object></video>

This markup presents all browsers with some way to play back video.

Although that "solves" your problem, it does have its drawbacks;

Mutliple files containing the same video
JavaScript manuipulation of the video won't work for the flash video
If you've not got flash enabled/installed, or using a HTML5 browser, you'll get the message "Please update your browser or install Flash"

Searching GitHub

tereza managed to get it working in IE8 by making a small alteration to the code. See Fix Source
ac0908 - Some things to check
jkneb - "Solved the problem by making sure the mediaelement-and-player.js file was in the exact same directory as the flashmediaelement.swf file."

JavaScript Free