Question

我们有一个自动启动的HTML 5视频（带有MP4后备的WEBM），它在Chrome和Firefox中运行良好。在IE版本9到11上，视频在视频开始之前暂时闪烁黑屏。根据客户的说法，他们会看到这个黑屏几秒钟，这显然是一个糟糕的用户体验。

我们尝试添加海报属性以在视频开始之前显示保持图像，但显然他们现在看到海报图像，然后是黑屏，然后视频开始。虽然海报图像和黑屏只出现了几分之一秒，但我也可以在我的本地观察到这一点。虽然还不好。

有没有人有这方面的经验？任何想法如何解决？这是我们的视频标记：

<video playsinline autoplay muted loop poster="https://placehold.it/600x400">
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
  <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type='video/webm;codecs="vp8, vorbis"'/>
  <img src="https://placehold.it/600x400" alt="Image fallback" />
</video>

Answer 1

尝试添加preload属性并使用JavaScript确保在开始尝试播放之前加载了一定量。像这样：

$(() => {
  $('video').on('click', function (e) {
    e.preventDefault();
    this.on('loadeddata', () {
      this.readyState >= 2 && this.play();
    }
  });
});

由于你只在本地看到它的闪光灯，但是你的客户看到它几秒钟（大概是远程的），很可能视频在播放之前没有开始加载，IE显示黑屏而不是海报，直到它有足够的缓冲。

Answer 2

我遇到了同样的问题并且可以通过播放视频后解决它。现在，在播放视频之前，没有半秒切换到黑屏。其他浏览器表现不同，似乎他们提前直接启动视频，没有短暂的中断。

video = document.getElementById("yourvideoid"); // don't autoplay the video
video.oncanplaythrough = function () { video.play(); }; // plays the video

问候。

在启动自动播放HTML5视频之前，如何防止IE闪烁黑屏？

2 个答案: