关键词搜索

全站搜索
×
密码登录在这里
×
注册会员

已有账号? 请点击

忘记密码

已有账号? 请点击

使用其他方式登录

HTML5<video>标签及属性使用详解

发布2022-09-20 浏览2128次

详情内容

在HTML5 video标签定义视频,比如电影片段或其他视频流。支持预加载,自动播放,静音,视频控制条,下载时显示图片等功能属性。

实例

HTML <video> 标签

一段简单的 HTML5 视频:

<video src="video.mp4" controls="controls">
您的浏览器不支持 video 标签。
</video>


完全属性参数实例

<video
  id="video" 
  src="video.mp4" /*视频地址*/
  controls = "true" /*是否显示播放控件*/
  poster="images.jpg" /*视频封面*/
  preload="auto" /*预加载*/
  webkit-playsinline="true" /*IOS中让视频在小窗内播放而不是全屏播放*/  
  playsinline="true" /*IOS微信浏览器支持小窗内播放*/ 
  x-webkit-airplay="allow" /*是否支持ios的AirPlay功能*/
  x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/
  x5-video-player-fullscreen="true" /*设置为true防止横屏*/
  x5-video-orientation="portraint" /*播放器的方向,landscape横屏,portraint竖屏,默认值为竖屏*/
  style="object-fit:fill">
</video>


属性

描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preload preload

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。


引用


说明

src:视频的地址

controls:允许用户控制视频的播放,包括音量,跨帧,暂停/恢复播放。

poster:视频封面,果未设置该属性,则使用视频的第一帧来代替。

preload:在页面加载后载入视频。

webkit-playsinline和playsinline:视频播放时局域播放,不脱离文档流 

x-webkit-airplay="allow": 是否支持ios的AirPlay功能。使用AirPlay可以直接从使用iOS的设备上的不同位置播放视频、音乐和图片文件

x5-video-player-type:启用同层H5播放器(沉浸式播放)WeChat安卓版特有的属性。播放时全屏,但是除去了control和微信的导航栏,只留下"X"和"<"两键。

x5-video-orientation:声明播放器支持的方向,可选值landscape横屏, portraint竖屏。默认值portraint。这个属性需要x5-video-player-type开启H5模式

x5­-video­-player­-fullscreen:全屏设置。属性值:ture和false


附加:object-fit 、object-position

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。

object-fit 一般用于 img 和 video 标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

object-position 属性一般与 object-fit一起使用,用来设置元素的位置。

object-fit: fill|contain|cover|scale-down|none|initial|inherit;


描述
fill 默认,不保证保持原有的比例,内容拉伸填充整个内容容器。
contain 保持原有尺寸比例。内容被缩放。
cover 保持原有尺寸比例。但部分内容可能被剪切。
none 保留原有元素内容的长度和宽度,也就是说内容不会被重置。
scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。
initial 设置为默认值
inherit 从该元素的父元素继承属性。 
object-position: position|initial|inherit;


描述
position 指定 image 或 video 在容器中的位置。第一个值为 x 坐标位置的值,第二个值为 y 坐标位置的值。表示的方式有:
object-position: 50% 50%;
object-position: right top;
object-position: left bottom;
object-position: 250px 125px;
initial 设置为默认值
inherit 从该元素的父元素继承属性。
点击QQ咨询
开通会员
上传资源赚钱
返回顶部
×
  • 微信支付
  • 支付宝付款
扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载