如何获得具有Alpha透明度的网络视频以在移动野生动物园中播放?

发布于 2025-02-02 19:11:10 字数 668 浏览 3 评论 0原文

我正在尝试添加a 具有Alpha透明度的Web视频到网站上。该视频以.WEBM格式为.WEBM,因此没有问题。在使用最新的iOS在Safari上进行检查时,我意识到Apple不支持WebM。研究了一段时间后,我一直陷入死胡同。

我尝试将其转换为HEVC编码的视频,但仍然不起作用。我尝试使用Premier重新出口apple ProRes 4444 xq .mov的视频文件,但这也不起作用。

我的代码只是标准HTML5,第二个视频源都是我尝试过的,并且无法在Safari上工作。

<video width="600" autoplay loop muted playsinline>
  <source src="movie.webm" type="video/webm">
  <source src="movie_HEVC.mp4" type='video/mp4; codecs="hvc1"'>
  <source src="movie_ProRes4444xq.mov" type="video/quicktime">
</video>

谢谢, 追赶

I am trying to add a web video that has alpha transparency to a website. The video is in .WebM format so no problem there. When checking it out on safari with the latest iOS I realized that Apple doesn't support WebM. After researching it a bit I keep running into dead ends.

I tried converting it into an HEVC encoded video but it still doesn't work. I tried re-exporting the video file from Premier with the format Apple ProRes 4444 XQ .mov and that didn't work either.

My code is just standard HTML5, with the second 2 video sources being both that I tried and could not get to work on Safari.

<video width="600" autoplay loop muted playsinline>
  <source src="movie.webm" type="video/webm">
  <source src="movie_HEVC.mp4" type='video/mp4; codecs="hvc1"'>
  <source src="movie_ProRes4444xq.mov" type="video/quicktime">
</video>

This CSS Tricks article shows a great example of what I am trying to accomplish. It even has a great guide on how to accomplish this task. However, one of the main steps on the guide requires a Mac for it's video encoding ability. I am on Windows. Is there a workaround or any other ways of achieving this?

Thanks,
Chase

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

夏の忆 2025-02-09 19:11:10

this 展示了我要完成的工作的一个很好的例子。


我也在窗户上,所以我无法确认工作的答案,但是尝试...

(1)通过仅使用iOS的一个源(必须是MOV或MP4)用“ HEVC”作为编解码器。

<video width="600" autoplay loop muted playsinline>
  <source src="movie_HEVC.mov" type='video/quicktime; codecs="hevc"'>
</video>

(2)在Windows上,尝试使用ffmpeg to 编码Pro-Res 444视频

ffmpeg -i inputfile.mp4 -c:v prores_ks -profile:v 3 -qscale:v N -vendor apl0 -pix_fmt yuv422p10le -s 800x600 -r 30 output.mov

This CSS Tricks article shows a great example of what I am trying to accomplish.

I am on Windows too so I cannot confirm a working Answer, but try...

(1) Test by using only one source for iOS (it must be either MOV or MP4) with "hevc" as the codec.

<video width="600" autoplay loop muted playsinline>
  <source src="movie_HEVC.mov" type='video/quicktime; codecs="hevc"'>
</video>

(2) On Windows, try using FFmpeg to encode Pro-Res 444 video.

ffmpeg -i inputfile.mp4 -c:v prores_ks -profile:v 3 -qscale:v N -vendor apl0 -pix_fmt yuv422p10le -s 800x600 -r 30 output.mov
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文