为什么透明视频不能在Safari上工作，尽管编解码器是兼容和正确的？
我最近“完成”了一个网站，它使用一些透明的视频移动，因为你滚动网站。它们在Chrome上工作得很好，因为我通过透明的WebM容器使用了VP9编解码器。
对于，我使用了--一个包含在MOV中的HEVC编解码器。我用Alpha编解码器将这段视频从Apple Prores 4444直接编码到了Finder中的HEVC。这使我得以保持HEVC的透明度。当通过Quicktime在我的Mac上播放时，它没有问题。
此外，我还提供了一个标准的、不透明的H264，如果任何浏览器对这两个浏览器都有困难的话。
然而，正如我的问题所述，在一个月前，当我对网站进行测试时，Safari并没有足够有趣地显示，它在Safari上发挥了神奇的作用。自那次测试以来，视频的HTML没有改变。
为了实现这种透明的视频风格，我遵循了本详细教程。如果你想更彻底，看看我网站的代码，你也可以使用在这里找到它。 (记住:这些视频在Chrome上工作，但它们不会出现在Safari中)。更奇怪的是，Firefox确实会显示视频，但只会显示一个冻结帧。它不会在滚动时播放它们。下面我附上了我在Safari和Firefox中看到的屏幕截图：
Safari:
该网站：
代码检查员：
之后的结果(这是明确的，在我的Mac上完美地工作。所以我相信它是正确编码的。而且它也有适当的联系。)
火狐：
总之，我不知道Safari和Firefox是怎么回事。我觉得我什么都试过了，我已经在网上搜索了答案，但没有结果。所以我来找你帮忙。我希望我们能弄清楚这件事:)
为什么Safari不显示这些视频，尽管一切看起来都是正确的？为什么火狐不播放它们呢？
谢谢您抽时间见我。
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="vp8, vorbis"" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
<source type="video/ogg; codecs="theora, vorbis"" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source>
<source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source>
p Sorry, your browser does not support the <video> element.
回答 1
Stack Overflow用户
发布于 2022-08-12 19:23:34
这里的问题是，您首先在.webm标记中列出了video源代码。浏览器将使用第一个受支持的source，而Safari确实支持.webm容器。因为Chrome al不支持.mov (Quicktime)容器，所以您可以倒转顺序，首先在列表中显示.mov选项。Chrome将跳过它并使用.webm文件，Safari将很高兴地使用.mov版本。
https://stackoverflow.com/questions/68295953
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号