使用CSS實(shí)現(xiàn)彈性視頻html5案例實(shí)踐_HTML5教程
推薦:突破canvas語法限制 讓他支持鏈?zhǔn)秸Z法突破canvas語法限制,有很多的朋友可能還不相信,本文將詳細(xì)介紹如何讓canvas支持鏈?zhǔn)秸Z法,需要了解的朋有可以參考下
當(dāng)我編碼Elemin Theme(我最近設(shè)計的一個響應(yīng)式的站點(diǎn))的時候,我遇到的一個跳幀就是,如何能讓嵌入式的視頻在尺寸變化上變得更加靈活。使用max-width:100% 和height:auto可以讓HTML5/">html5的video標(biāo)簽很好的工作,但是這個解決方案不適用于iframe 或者 object標(biāo)簽的內(nèi)嵌代碼。通過幾小時的尋找資料和實(shí)驗(yàn),我最終找到了解決辦法。當(dāng)你在進(jìn)行響應(yīng)式設(shè)計的時候,這一css技巧能派上用場。
靈活的html5 video標(biāo)簽
使用html5的video,可以通過設(shè)置max-width:100%讓他變得靈活。前面的介紹中,已經(jīng)提到他不適用于常用的iframe和object中的內(nèi)嵌代碼。
video {
max-width: 100%;
height: auto;
}
靈活的Object & Iframe 內(nèi)嵌視頻
這個技巧相當(dāng)簡單,你需要為video添加一個<div>容器,并且將div的padding-bottom屬性值設(shè)置在50%到60%之間。然后設(shè)置子元素(ifame或者object)的width和height為100%,并且使用絕對定位。這樣會迫使內(nèi)嵌對象自動擴(kuò)充到最大。
CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML
<div class="video-container">
<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>
在固定寬度下實(shí)現(xiàn)靈活性
如果限制了視頻的寬度,那么我們需要一個額外的<div>容器包裹video,并為div設(shè)置固定寬度和max-width:100%。
CSS
.video-wrapper {
width: 600px;
max-width: 100%;
}
HTML
<div class="video-wrapper">
<div class="video-container">
<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>
<!-- /video -->
</div>
<!-- /video-wrapper -->
兼容性
這個技巧支持所有的瀏覽器,包括:Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone 和 iPad。
分享:html5拖曳操作 HTML5實(shí)現(xiàn)網(wǎng)頁元素的拖放操作HTML5之前,要實(shí)現(xiàn)網(wǎng)頁元素的拖放操作,需要依靠mousedown、mousemove、mouseup等API,通過大量的JS代碼來實(shí)現(xiàn),而如今html5大大簡化了網(wǎng)頁元素的拖放操作編程難度,API除了支持瀏覽器內(nèi)部元素的拖放外,同時支持瀏覽器和其它應(yīng)用程序之間的數(shù)據(jù)互相拖動
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開發(fā)的過程介紹
- HTML5 對各個標(biāo)簽的定義與規(guī)定:body的介紹
- 關(guān)于HTML5的安全問題開發(fā)人員需要牢記的
- 關(guān)于HTML5的22個初級技巧(圖文教程)
- 開發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫的SQL語句的使用方法
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略(CSP)簡介
- HTML5 Web存儲方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類型和email類型簡介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- HTML5中實(shí)現(xiàn)拖放效果無須借助javascript
- 突襲HTML5之Javascript API擴(kuò)展2—地理信息服務(wù)及地理位置API學(xué)習(xí)
- HTML中fieldset標(biāo)簽概述及使用方法
- HTML5之SVG 2D入門9—蒙板及mask元素介紹與應(yīng)用
- html5拖曳操作 HTML5實(shí)現(xiàn)網(wǎng)頁元素的拖放操作
- 網(wǎng)易微博Web App用HTML5開發(fā)的過程介紹
- html5 canvas-1.canvas介紹(hello canvas)
- html5中地理位置定位api接口開發(fā)應(yīng)用小結(jié)
- html5 Canvas畫圖教程(10)—把面拆成線條模擬出圓角矩形
- html5配合css3實(shí)現(xiàn)帶提示文字的輸入框(擺脫js)
- 相關(guān)鏈接:
- 教程說明:
HTML5教程-使用CSS實(shí)現(xiàn)彈性視頻html5案例實(shí)踐。