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.
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".
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;
First, a couple of things to try:
<head>
tag. It will not work from <body>
in IE6-8.I put together a working example in IE8 below.
Example on JSBin.
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