video标签

video{
object-fit:fill;
}

fill: 默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。

contain: 保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。
		因此，此参数可能会在容器内留下空白。
		
cover: 保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，
		宽度和高度至少有一个和容器一致。因此，
		此参数可能会让替换内容（如图片）部分区域不可见。
		
none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。

scale-down: 就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

 <source
   src={getPlatformResource(background.video)}
   type="video/mp4"
 />

poster 视频封面
onCanPlayThrough 视频可以正常播放时执行
onTimeUpdate time更新时触发

const Fn = () => {
  cosnt videoRef = useRef<HTMLVideoElement>()
  return <video src=""
    autoplay={true}
    muted={true}
    loop={false}
    onTimeUpdate={event => {
      const video = event.currentTarget;
      if (video) {
        if (video.currentTime >= video.duration) {
          video.currentTime = 14;
          video.play().catch(() => {

          })
        }
      }
    }}
    ref={ele => { videoRef.current = ele; }}
  >
    <source type="video/mp4" src={`video.mp4`} />
    <source type="video/mp4" src={`video.webm`} />
  </video>
}

项目中使用的经验

<video
  id="video" 
  src="video.mp4" 
  controls = "true"
  poster="images.jpg" /*视频封面*/
  preload="auto" 
  webkit-playsinline="true" /*这个属性是ios 10中设置可以
                     让视频在小窗内播放，也就是不是全屏播放*/  
  playsinline="true"  /*IOS微信浏览器支持小窗内播放*/ 
  x-webkit-airplay="allow" 
  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: 会提供用户控制，允许用户控制视频的播放

webkit-playsinline和playsinline: 视频播放时局域播放，不脱离文档流
	解决ios自动弹出播放视频
	
poster: 解决有些手机无法播放视频的问题

preload: 属性规定在页面加载后载入视频。
	这个有大bug,造成ios手机 无限刷新，视频无法播放，慎用

x-webkit-airplay="allow" : 这个属性应该是使此视频支持ios的AirPlay功能


x5-video-player-type: 	解决直播问题，诸如弹幕
	启用同层H5播放器，就是在视频全屏的时候，
	div可以呈现在视频层上，也是WeChat安卓版特有的属性。同层播放别名也叫做沉浸式播放，播放的时候看似全屏
	，但是已经除去了control和微信的导航栏，只留下"X"和"<"两键。目前的同层播放器只在Android（包括微信）上生效
	，暂时不支持iOS。至于为什么同层播放只对安卓开放，是因为安卓不能像ISO一样局域播放，
	默认的全屏会使得一些界面操作被阻拦，如果是全屏H5还好，
	但是做直播的话，诸如弹幕那样的功能就无法实现了，所以这时候同层播放的概念就解决了这个问题。
	不过在测试的过程中发现，不同版本的IOS和安卓效果略有不同

x5-video-orientation: 声明播放器支持的方向，可选值landscape 横屏, portraint竖屏

x5­-video­-player­-fullscreen:全屏设置。
	安卓微信浏览器是X5内核
	IOS 微信浏览器是Chrome的内核

全屏处理

<video id="video" src="xx.mp4" playsinline webkit-playsinline></video>
ios
ios加playsinline属性，之前只带webkit前缀的在ios10以后，会吊起系统自带播放器，
两个属性都加上基本ios端都可以保证内敛到浏览器webview里面了。

你要兼容uc或者qq的浏览器 带 这个库iphone-inline-video具体用法很简单看它github

android
x5-video-player-type="h5"属性，
	腾讯x5内核系的android微信和手Q内置浏览器用的浏览器webview的内核，
	使用这个属性在微信中视频会有不同的表现，会呈现全屏状态，貌似播放控件剥去了，至
	少加了这个属性后视频上层可以有其他dom元素出现了（非腾讯白名单机制的一种处理措施）。

自动播放

muted autoplay 一般都解决了
个别情况只能 手动控制
video.play
document.addEventListener("WeixinJSBridgeReady", function (){ 
    video.play();
    video.pause();
}, false)

播放控制

video.addEventListener('timeupdate',function (){
    //当视频的currentTime大于0.1时表示黑屏时间已过，已有视频画面，可以移除浮层（.pagestart的div元素）
    if ( !video.isPlayed && this.currentTime>0.1 ){
        $('.pagestart').fadeOut(500);
        video.isPlayed = !0;
    }
})

react 语法如何添加video属性

react不支持，只能用原生DOM的方法

x5-video-orientation="portraint"
webkit-playsinline='true'
playsinline='true'
x-webkit-airplay='true'
x5-video-player-type='h5'
x5-video-player-fullscreen='true'
x5-video-ignore-metadata='true'



 const ref = useRef<HTMLVideoElement>(null);
  useEffect(() => {
    if (!ref.current) {
      return;
    }
    ref.current.defaultMuted = true;
    ref.current.muted = true;
    ref.current.setAttribute('x5-playsinline', 'true');
    ref.current.setAttribute('webkit-playsinline', 'true');
  }, []);

微信web浏览器播放

    document.addEventListener('WeixinJSBridgeReady', () => {
      videoRef.current?.play();
    });

隐藏播放控件

<div class="videobox" ontouchmove="return false;">
    <video id="mainvideo" src="test.mp4" x5-video-player-type="h5" playsinline webkit-playsinline></video>
</div>

video属性和事件

菜鸟的video文档包含所有自带属性和方法