您的浏览器不支持 video 标签。 属性性值描述autoplayautoplay如果出现该属性,则视频在就绪后马上播放。controlscontrol"> <video>标签及属性说明 - 站长技术 - 爱尔美收录网
导航首页 » 文章首页 » 站长技术 » <video>标签及属性说明

<video>标签及属性说明

2023-03-24 419 站长技术

实例

HTML video一段简单的 HTML5 视频:

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

属性

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

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

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

srcurl要播放的视频的 URL。
widthpixels设置视频播放器的宽度。

引用

<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>

说明

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;
描述
autoplayautoplay如果出现该属性,则视频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。
mutedmuted规定视频的音频输出应该被静音。
posterURL规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preloadpreload

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

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

srcurl要播放的视频的 URL。
widthpixels设置视频播放器的宽度。
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从该元素的父元素继承属性。


上一篇
143

PHP根据不同URL 显示不同内容。