「VideoJS」フラッシュ プレーヤー フォールバックのポスター イメージを解決策なしで設定する方法を尋ねる質問が多数あります。私はちょうど同じ質問をするだろうと思った。
3 に答える
私は同じ問題を抱えていました.Playerを応答させたかったので、それが発生しました. したがって、ビデオプレーヤーの自動の高さと幅を設定し、ここで次のように 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;
}
これは、ポスター画像を表示しなかったフラッシュプレーヤーを除いて、うまくいきました。この問題を解決するには、css に次のルールを追加してポスター画像を調整する必要がありました。
.vjs-poster {
position: absolute;
bottom: 0;
}
それがあなたにも役立つことを願っています。
HTML5 ビデオ タグで poster 属性を指定するだけで、再生に使用される技術に関係なく、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 が行うことは、class の div を作成しvjs-poster
、背景を poster 属性で指定されたものに設定することです。このJSBinで、この例を実際に見ることができます。プレーヤーのオプションは、ブラウザがファイルをネイティブに再生できるかどうかに関係なく、最初に Flash プレーヤーをロードするように設定されています。
video.js でポスターをビデオ ノードから直接取得することはできませんでした。poster
さらに、オプションとして直接コンストラクターに渡します。
var videoPlayer = _V_('snippet-video', {
autoplay: false,
controls: true,
preload: 'auto',
height: 450,
width: 420,
poster: 'some/preview/url'
})
これは、Flash フォールバックとネイティブ ビデオ要素で機能します。