沒有Flash Fallback的海報圖像

Question

我看到一些問題，詢問如何爲沒有解決方案的「VideoJS」flash player fallback設置海報圖像。我以爲我只會問同樣的問題。

Answer 1

我們沒有運氣讓video.js直接從視頻節點中拉出海報。另外，我們將poster作爲選項直接傳遞給構造函數。

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

這適用於Flash後備和原生視頻元素。

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，並設置背景無論是在海報屬性指定。你可以在這個JSBin中查看這個實例。播放器選項設置爲首先加載Flash播放器，而不管瀏覽器是否可以原生播放文件。

Answer 3

我有同樣的問題，它發生，因爲我想我的播放器響應。因此，我必須設置自動播放器的高度和寬度，並按如下所示調整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; 
} 

這個結果不錯，除了flash播放器，它沒有表現出海報圖像。 爲了解決這個問題，我不得不將以下規則添加到CSS以調整海報圖像。

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

我希望它也能幫助你。