网站建设公司做网站调用视频video标签用法
一段简单的 HTML5 视频：
<video src="video.mp4" controls="controls">
您的浏览器不支持 video 标签。
</video>
属性
性 值 描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload preload
如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
引用
<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;
值 描述
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 从该元素的父元素继承属性。
以上就是速优网络和大家分享的"网站建设公司做网站调用视频video标签用法",非常感谢您有耐心的读完这篇文章，我们将为您提供更多参考使用或学习交流的信息。我们还可为您提供：企业网站建设、网站仿制、网站复制、仿站、外贸网站建设、外贸建站、公司官网制作等服务，本公司以“诚信、专业、务实、创新”的服务理念服务于客户。如您需要合作，请扫码咨询，我们将诚挚为您服务。
TAG标签：
