如何禁用视频标签上的自动海报图像生成?

发布于 2024-09-05 22:01:17 字数 178 浏览 1 评论 0原文

我在视频标签上使用“海报”属性,它至少在 webkit 浏览器中的工作方式似乎是加载海报图像,然后一旦加载了足够的视频,它就会用自动替换该海报从视频文件本身生成海报。

然而,我的海报图像与自动生成的海报不匹配,这导致了一种奇怪的体验:加载一张图像,然后在几秒钟内被自动生成的图像替换。有什么办法可以防止自动生成的图像被使用吗?

I'm using the 'poster' attribute on a video tag and the way it seems to work at least in webkit browsers is that it loads the poster image and then once enough of the video has loaded, it replaces that poster with an auto-generated poster from the video file itself.

However, my poster images don't match the auto-generated posters which results in a weird experience of one image loading, then being replaced in a few seconds by the auto-generated image. Is there any way to prevent the auto-generated image from being used?

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

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

发布评论

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

评论(3

辞慾 2024-09-12 22:01:17

我们设法在 JW Player for HTML5。最简单的方法如下:

  • 如果
  • 将点击处理程序添加到

这会工作得很好,但它仍然意味着您在重播时会遇到问题,因为重新出现的海报图像不会与原始图像相同,除非您执行更多 JS 魔法。

另外值得注意的是,您不能在

  • 添加另一个
  • 将点击处理程序添加到新的
    中。当新的

    出现时单击后,隐藏新的

    并显示视频标签。
  • 视频播放完毕后,隐藏<视频>按钮。并显示新的

希望这有帮助!

最佳,

扎克

开发者,长尾视频

We managed to get around this in the JW Player for HTML5. The easiest way is as follows:

  • If the <video> src property is set, unset it and store the location.
  • Add a click handler to the <video> tag. When it's clicked, re-set the <video> src property.

This will work fine, but it still means that you'll have issues on replay, as the poster image that re-appears won't be the same as the original, unless you do some more JS magic.

Also worth noting that you can't place anything on top of the <video> tag in mobile Safari. The way to get around this:

  • Set the <video> CSS display:none
  • Add another <div> in the same location, with the same dimensions as the <video> element, with a CSS background image that's the same as the poser image.
  • Add a click handler to the new <div>. When the new <div> is clicked, hide the new <div> and show the video tag.
  • When the video has completed playback, hide the <video> and show the new <div>.

Hopefully that helps!

Best,

Zach

Developer, LongTail Video

长梦不多时 2024-09-12 22:01:17

这就是 webkit 浏览器决定实现规范的方式(如上所述)。我同意你的观点,这不是很直观,而且我自己也更喜欢保留海报图像,直到用户点击播放按钮。我建议您向 webkit 提交错误报告(或功能请求)https://bugs.webkit.org/< /a> .

This is the way in which webkit browsers have decided to implement the spec (as cited above). I agree with you that it is not very intuitive and would myself also prefer to keep the poster image up until the user hits the play button. I suggest you submit a bug report (or feature request) to webkit for it https://bugs.webkit.org/ .

嘿看小鸭子会跑 2024-09-12 22:01:17

唯一的选择是确保视频的第一帧与海报相同,或者根本不使用它。

“当视频元素暂停并且当前播放位置是视频的第一帧时,该元素表示与当前播放位置对应的视频帧或海报帧,具体由用户代理决定。” -- http://www.w3.org/TR/ html5/video.html#attr-video-poster

Only option is to make sure first frame of your video is same as poster or not to use it at all.

"When a video element is paused and the current playback position is the first frame of video, the element represents either the frame of video corresponding to the current playback position or the poster frame, at the discretion of the user agent." -- http://www.w3.org/TR/html5/video.html#attr-video-poster

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文