.m4v 格式的标题视频无法在 IE 11 中播放答案

【问题标题】：Header video in .m4v format doesn't play in IE 11.m4v 格式的标题视频无法在 IE 11 中播放
【发布时间】：2020-09-28 10:46:00
【问题描述】：

我有一个问题，IE11 没有播放我的 html5 视频标签视频。我已经尝试过其他浏览器，例如 Chrome/Firefox，并且运行良好。 IE11 甚至没有在控制台中给我一个错误，为什么它没有播放视频并显示白色背景。我尝试了不同的格式，例如 .m4v 和 mp4。视频采用 h264 编码和网络优化（我使用名为“Handbrake”的软件对视频进行编码），分辨率为 1920x1088。我还尝试将“”放在我的网站头中。

我的 HTML 代码

<video autoplay loop muted id="player">

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

我的 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";
 }



});

【问题讨论】：

那么在 IE 中无法播放 HTML5 视频？
有一些，见developer.mozilla.org/en-US/docs/Web/HTML/Element/video

标签： javascript html video internet-explorer-11

【解决方案1】：

我尝试用 MP4 格式的 H264 编码器视频进行测试。

它看起来在 IE 11 浏览器上运行良好。

这是一个测试代码：

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

在这里，您可以看到我已经使用 VLC 播放器验证了视频具有 H264 编码器。

在 IE 11 浏览器中的输出：

从this site下载的视频

【讨论】：

这确实是一个有趣的提示，但是当我检查我的视频文件编解码器时，它是我预期的 H264。也许问题是我的视频是全宽 1920x1088？
如果可能的话，请在此处分享您的示例视频链接。我们可以尝试用它做一个测试来检查结果。这可能有助于缩小问题范围。
事实证明我的 WordPress 网站没有在任何计算机上加载 JavaScript，我正在尝试解决这个问题。
感谢您向我们更新问题的当前状态。我建议您可以检查您的网站是否使用其他浏览器加载 JS。如果是 IE 特定问题，则转到 Internet 选项-> 安全选项卡-> 选择正确的区域并单击自定义级别按钮。查找并检查是否启用了“活动脚本”选项。如果没有，则启用它并再次检查问题。此外，请检查浏览器控制台以查看它是否显示任何错误消息。