這是個開源碼的網頁影片播放器,完全為html5的video標籤打造
使用javascript和css做的,所以很多東西都可以自己改,非常好的套件
詳細使用方法可參考官網www.videojs.com
這裡只是要記一下我使用的時候,有改的東西
讓播放按鈕置中:只要加入類別 vjs-big-play-centered 即可
<video class=”video-js vjs-default-skin vjs-big-play-centered” data-setup='{}’>
<source src=”video.mp4″ type=”video/mp4″>
</video>
等比縮放:加入這個樣式,多少百分比依照你想要的螢幕比例,下面這是16:9的比例
.video-js {
padding-top: 56.25%
}
若要依照網頁大小,自動調整寬度則使用width=”auto”
2016/1更新:新版的自動調整寬度請至:https://blog.pureday.life/archives/947
<video class=”video-js vjs-default-skin vjs-big-play-centered” width=”auto” data-setup='{}’>
<source src=”video.mp4″ type=”video/mp4″>
</video>
如果要縮小到特殊寬度,例如width=”30%”,則要把高度取消height=””,因為套件本身的js會去設定高度
<video class=”video-js vjs-default-skin vjs-big-play-centered” width=”30%” height=”” data-setup='{}’>
<source src=”video.mp4″ type=”video/mp4″>
</video>