flash - 没有 Flash 后备的海报图片

Question

我看到许多问题询问如何在没有解决方案的情况下为“VideoJS”Flash 播放器后备设置海报图像。我以为我会问同样的问题。

Answer 1

我遇到了同样的问题，它发生是因为我希望我的播放器能够响应。因此我必须设置视频播放器自动的高度和宽度，并按如下方式调整 css 。

HTML：

<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered"
                           controls preload="auto" width="auto" height="auto"
                           poster="img/myVideoPoster"
                           data-setup='{"example_option":true}'>
                        <source src="video.mp4" type='video/mp4'/>
                        <source ... />
</video>

CSS：

.video-js {
    padding-top: 56.26% !important;
}

.vjs-fullscreen {
    padding-top: 0px !important;
}

除了没有显示海报图像的 flashplayer 之外，这效果很好。为了解决这个问题，我必须在 css 中添加以下规则来调整海报图像。

.vjs-poster {
    position: absolute;
    bottom: 0;
}

我希望它也能帮助你。

Answer 2

您只需在 HTML5 视频标签中指定海报属性，Video.js 就会处理它，而不管用于播放的技术如何。

<video id="my_video_1" class="video-js vjs-default-skin" poster="http://videojs.com/img/poster.jpg" controls preload="auto" width="640" height="268" data-setup='{}'>
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
  <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
</video>

如果您想知道，Video.js 所做的就是创建一个具有类的 divvjs-poster并将背景设置为海报属性中指定的任何内容。您可以在此JSBin中查看此示例。播放器选项设置为首先加载 Flash 播放器，无论浏览器是否可以原生播放文件。

Answer 3

我们没有运气让 video.js 直接从视频节点中拉出海报。此外，我们将poster直接作为选项传递给构造函数。

var videoPlayer = _V_('snippet-video', {
  autoplay: false,
  controls: true,
  preload:  'auto',
  height:   450,
  width:    420,
  poster:   'some/preview/url'
})

这适用于 Flash 后备和原生视频元素。