＜video＞标签、属性说明及VUE3播放状态监听

实例

HTML <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"
  ref="video"/*监听播放状态绑定*/
  @play="isPlaying = true" /*播放*/
  @pause="isPlaying = false" /*暂停*/
  @ended="isPlaying = false" /*结束*/
  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>

播放状态监听

/*VUE3中通过watch监听播放状态*/

let video = ref(null) //通过ref绑定视频对象
let isPlaying = ref(false) //视频播放状态
watch(isPlaying, (newVal) => {
  if (newVal) {
   
   // @play="isPlaying = true" /*播放*/
   // 播放 isPlaying 为 true 做点什么

  } else {
    
   // @pause="isPlaying = false" /*暂停*/
   // @ended="isPlaying = false" /*结束*/
   // 暂停或结束 isPlaying 为 false 做点什么

  }
})

说明

属性	说明
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	从该元素的父元素继承属性。