尽管编解码器兼容且正确，为什么透明视频不能在 Safari 上工作？

编程问答 2022-04-21

问题描述

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

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

此外，如果任何浏览器对上述两种浏览器有困难，我还添加了一个标准的非透明 H264。

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

为了实现这种透明的视频风格，我遵循了this detailed tutorial。 如果您想更彻底地查看我网站的代码，您也可以find it here.（请记住：这些视频在 Chrome 上可以运行，但它们不会出现在 Safari 中。） 更奇怪的是，Firefox 确实显示了视频，但只是一个冻结帧。滚动时它不会播放它们。 下面我附上了我在 Safari 和 Firefox 中看到的截图：

Safari：

网站：

enter image description here

代码检查员：

enter image description here

点击链接后的结果（很明显，它在我的 Mac 上完美运行。所以我相信它被正确编码。它也被正确链接。）

enter image description here

火狐：

enter image description here

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

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

感谢您抽出宝贵时间。

PS：如果有人想知道，我可以在滚动时按照 this classic example 播放视频： 

// 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.

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

firefoxfirefoxhtmljavascriptsafarivideovideo