没有 Flash 后备的海报图片答案

【问题标题】：No Poster Image for Flash Fallback没有 Flash 后备的海报图片
【发布时间】：2013-10-23 16:48:08
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

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;
}

希望对你也有帮助。

【讨论】：

【解决方案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 所做的就是创建一个类为 vjs-poster 的 div，并将背景设置为海报属性中指定的任何内容。您可以在此JSBin 中查看此示例。播放器选项设置为首先加载 Flash 播放器，无论浏览器是否可以原生播放文件。

【讨论】：

【解决方案3】：

我们无法让 video.js 直接从视频节点中提取海报。此外，我们将poster 作为选项直接传递给构造函数。

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

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

【讨论】：