[Video.js]自動調整影片寬度(v5.4.4)

最近看到了Vedio.js更新到了5.4.4,想說就來用看看,之前設定的都不太適用,研究了一下怎麼設定,才能讓影片的寬度自動隨著視窗改變。

新版的Vedio.js不能設定widht=”auto”,一開始設定width=”100%”,也無法讓影片的寬度在父元素裡達到最寬。

利用jquery去自動設定,width=”100px”寬度先設定一個質,效果也不佳,因為他會先載入一個寬度100px,再調整寬度,畫面不是很好看,而且用手機看會常發生影片載入錯誤的問題

後來我在官網找到了最好的解答,設定如下

<video id="my_video_1" class="video-js vjs-default-skin" width="100%" height="auto"
    controls data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>
    <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>

寬度可以設定100%,高度設定auto,在data-setup設定aspectRatio,可以完美讓影片呈現最好的比例,一般影片常用比例可以參考維基百科

更多設定與使用可參考官方網站:http://videojs.com/

Leave a Reply

你的電子郵件位址並不會被公開。