Header video in .m4v format doesn't play in IE 11

问题

I have a problem that IE11 isn't playing my html5 video tag video. I've tried other browsers like Chrome/Firefox and there it works perfectly fine. IE11 doesn't even give me an error in the console why it isn't playing the video and shows me white background. I tried different formats like .m4v and mp4. The video is in h264 encoding and web optimized(I'm using software named "Handbrake" to encode the video"), the resolution is 1920x1088. I also tried to put "" in my website head.

My HTML code

<video autoplay loop muted id="player">

</video>
 <img id="backfill-image" src="<?php bloginfo('template_url'); ?>/img/backgroundimage.jpg"> 
</div>

My JavaScript

let myPlayer;
let backfill;

window.addEventListener('DOMContentLoaded', (event) => {

myPlayer = document.getElementById("player");
backfill = document.getElementById("backfill-image");

 myPlayer.onerror = function() {
   console.error(myPlayer.error);
   showPlaceholderImage();
};

// Example invalid source to throw an error
myPlayer.src = ""+templateUrl+"/img/myvideo.m4v";
 // Example valid source that doesn't throw an error 
 // myPlayer.src = "https://www.w3schools.com/tags/movie.mp4";


 function showPlaceholderImage() {
   myPlayer.style.display = "none";
    backfill.style.display = "block";
 }



});

回答1:

I tried to make a test with the MP4 format H264 encoder video.

It looks like it is working fine on the IE 11 browser.

Here is a test code:

<!DOCTYPE html> 
<html> 
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
</head>
<body> 
	<video width="400" autoplay>
  	<source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_5MB.mp4" type="video/mp4"> 
  	Your browser does not support HTML video.
	</video>
</body> 
</html>

Here, you can see that I have verified that the video has an H264 encoder using a VLC player.

Output in the IE 11 browser:

Video downloaded from this site

来源：https://stackoverflow.com/questions/62279520/header-video-in-m4v-format-doesnt-play-in-ie-11

标签

javascript

html

video

internet-explorer-11