统一播放效果

iOS

在 iOS 上，播放视频默认会弹出一个播放器全屏播放视频，可以控制视频的播放进度、音量以及暂停或继续播放，播放视频时，视频会 “浮” 在页面上，页面上的所有元素都只能是在视频下面

通过playsinline属性和iphone-inline-video插件可以让视频行内播放

Android

通过配置X5同层播放器，给 video 设置x5-video-player-type="h5"和 x5-video-player-fullscreen="true"，使视频行内播放
当安卓微信内视频自动/手动，进入/退出全屏播放状态时，可以触发以下事件

document.getElementById('video').addEventListener("x5videoexitfullscreen", function(){
  alert("exit fullscreen")
})
 
document.getElementById('video').addEventListener("x5videoenterfullscreen", function(){
  alert("enter fullscreen")
})

一些比较通用的事件

video.addEventListener('timeupdate', function (e) {
  console.log(video.currentTime) // 当前播放的进度
})
 
video.addEventListener('ended', function (e) {
  // 播放结束时触发
})

---

1. 播放时独占屏幕(顶层)，进入/退出播放时可触发x5videoenterfullscreen/x5videoexitfullscreen事件，width:100%用于防止播放时视频超出页面宽高

<video id="video"
  src="http://sensingstore.oss-cn-shanghai.aliyuncs.com/Uploads/Tenants/5056/Ads/C2Mlogo_2020011016310058717546.mp4"
  style="width:100%;" controls preload=""></video>

2. 行内播放

<video id="video"
    src="http://sensingstore.oss-cn-shanghai.aliyuncs.com/Uploads/Tenants/5056/Ads/C2Mlogo_2020011016310058717546.mp4"
    x5-playsinline="true" playsinline="true" webkit-playsinline="true"
    x5-video-player-type="h5" x5-video-player-fullscreen="true" style="width:100%;" controls preload="auto"></video>

行内播放