html

如何让 HTML5 的 Video 标签中的 poster 占满整个区域？

code 1076536 640
~ 白宦成 ~ Leave a comment

在帮导师上传视频时，遇见了一个问题
为了让页面不那么空白，在放置 Video 标签时，我添加了 Poster 属性，从而使视频未播放时，可以正常的显示一张图片。一方面可以保持原有的体验不变（这里之前就是一张图片）。
但是当我真正放好了以后，发现一个问题，就是 Poster 无法完整的覆盖整个区域，大概就是填满我下方截图中所圈出的区域。两侧会有留白。而我的 CSS 是有边框的，所以会非常的丑。
一开始，我认为是 Poster 的比例问题，但是在我按照播放器的比例来切割 poster 尝试多次无果之后，我觉得问题不是出在这里。
4ym5p
问题出在哪里我目前还不清楚，无空深究，这里只把解决方案贴出，具体的原因待以后有空再来深究。

可行方案

当前的方案是采用的 background 来实现的。
首先，删除 video 标签的 poster 属性，然后将其 preload 属性设置为 none,
接下来，添加 CSS 代码

 video {
   background: transparent url('video-image.jpg') 50% 50% / cover no-repeat ;
 }

实现后的效果如下
luse8
跳变的原因不明，后续研究。
[title]Todo[/title]

  1. 搞清楚为何 Poster 没有占满
  2. 搞清楚为何出现跳变

[title]拓展阅读[/title]
https://stackoverflow.com/questions/10826784/make-html5-video-poster-be-same-size-as-video-itself