javascript - 尽管编解码器兼容且正确，为什么透明视频无法在 Safari 上运行？

Question

我最近“完成”了一个网站，它使用了一些透明视频，这些视频会随着您滚动网站而移动。它们在 Chrome 上完美运行，因为我通过一个透明的 WebM 容器使用了 VP9 编解码器。

对于 Safari，我使用了包含在 MOV 中的 HEVC 编解码器。我直接在 Finder 中将此视频从带有 Alpha 编解码器的 Apple Prores 4444 编码到 HEVC。这使我能够保持 HEVC 的透明度。当通过 Quicktime 在我的 Mac 上播放时，它可以毫无问题地播放。

此外，如果任何浏览器在上述两个方面遇到困难，我还包括一个标准的非透明 H264。

但是，正如我的问题所述，Safari 不显示任何内容。有趣的是，一个月前，当我测试该网站时，它在 Safari 上运行得非常好。自那次测试以来，视频的 HTML 没有改变。

为了实现这种透明的视频风格，我遵循了这个详细的教程。如果您想更彻底地查看我网站的代码，您也可以在此处找到它。（记住：视频可以在 Chrome 上运行，但它们不会出现在 Safari 中。）更奇怪的是，Firefox 确实显示了视频，但只是一个定格。滚动时不会播放它们。 下面我附上了我在 Safari 和 Firefox 中看到的屏幕截图：

苹果浏览器：

网站：

代码检查器：

遵循链接后的结果（需要明确的是，它在我的 Mac 上完美运行。所以我相信它已正确编码。而且它也已正确链接。）

火狐：

总而言之，我不知道 Safari 和 Firefox 中发生了什么。我觉得我已经尝试了一切，并且我已经在网上搜索了答案，但无济于事。所以我来找你帮忙。我希望我们能解决这个问题:)

尽管一切似乎都是正确的，为什么 Safari 不显示这些视频？为什么 Firefox 不播放它们？

感谢您的时间。

‎</p>

‎</p>

PS：如果有人想知道，我可以通过以下经典示例在滚动时播放视频：

// select video element
var vid = document.getElementById('v0');
//var vid = $('#v0')[0]; // jquery option

// pause video on load
vid.pause();
 
// pause video on document scroll (stops autoplay once scroll started)
window.onscroll = function(){
    vid.pause();
};

// refresh video frames on interval for smoother playback
setInterval(function(){
    vid.currentTime = window.pageYOffset/400;
}, 40);

#set-height  
  display block
  height 13500px
#v0
  position fixed 
  top 0  
  left 0  
  width 100%

p font-family helvetica 
  font-size 24px

#set-height
p#time
video(id="v0",  tabindex="0", autobuffer preload)
    <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
    <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source>
    <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source>
    p Sorry, your browser does not support the &lt;video&gt; element.

标签： javascripthtmlfirefoxvideosafari