Question

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

Answer 1

我遇到了同样的问题，因为我希望我的播放器具有响应能力。因此，我必须设置自动视频播放器的高度和宽度，并按照以下here调整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所做的是创建一个类vjs-poster的div，并将背景设置为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后备和原生视频元素。

没有Flash Fallback的海报图片

3 个答案: