全国客服热线:4006-880844

网站建设定制远程视频自适应网页设计方法

- 编辑:admin -

具体代码有CSS3代码和HTML5代码两部分;其中CSS3代码部分主要用来控制远程视频的载入及宽高比等, 而HTML5代码部分主要控制视频显示分辨率及负责视频地址的连接。

       远程视频自适应网页设计方法(1) 、用Fit Vids插件实现远程视频自适应:网页中的远程视频自适应可以借助于一个名为Fit Vids插件实现。(2) 、用流动布局技术实现远程视频自适应:为保证远程视频能够自适应移动终端等屏幕的宽度, 可以先用<div>标签将<iframe>包装起来, 并定义合适的样式;同时指定60%填充底部;然后用100%宽度、100%高度、绝对位置指定子元素的尺寸, 以使被嵌入的元素可以自动扩展到最大宽度。

       具体代码有CSS3代码和HTML5代码两部分;其中CSS3代码部分主要用来控制远程视频的载入及宽高比等, 而HTML5代码部分主要控制视频显示分辨率及负责视频地址的连接。

       CSS3主要基于不同视频文件的宽高比例有所不同而设计使用, 对于标准视频文件, 其宽高比4∶3, 而对于宽屏模式, 其宽高比为16∶9。而对于上述HTML5代码中, 宽高像素比是640∶480, 即是我们所说的宽高比4∶3, 那么相应CSS3中padding-bottom的值应为75%;如果当视频宽高比是16∶9时, 相应CSS3中padding-bottom的值则需要修改为56.25%;再就是需要根据所要显示视频文件像素大小来修改HTML5代码中<iframe>内视频文件的宽度、高度等属性。