Video element is not displaying in IE8?

问题

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.

回答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>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <script type="text/javascript" src="http://mediaelementjs.com/js/mejs-2.13.2/mediaelement-and-player.min.js"></script>
    <script>
        jQuery(document).ready(function($) {
            var player = new MediaElementPlayer('#player1');
        });
    </script>
</head>
<body>
    <video id="player1" src="http://techslides.com/demos/sample-videos/small.mp4" width="320" height="240"></video>
</body>

Working in IE8

回答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;

<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;

<video id="video1" width="640" height="360" >
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <object width="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">
        <param name="SRC" value="player.swf?file=video.mp4">
        <embed src="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."

来源：https://stackoverflow.com/questions/21405265/video-element-is-not-displaying-in-ie8

标签

javascript

jquery

mediaelement.js