手机播放器

.video-poster{position:absolute;左：0；顶部：0；宽度：100%；高度：100%；z-指数：3；//显示在视频组件顶层background-repeat:no-repeat;背景大小：100%100%；//100%填充background-position:50%;//居中H5自带开箱即用的内置播放器，支持全屏等功能。问题在PC上使用video可以正常播放，但是在手机上使用video标签会出现很多问题。可以参考一下H5-Video可以做什么&存在的坑1.各个环境下的VideoUI不一致2.各个环境下的API实现和支持程度不同：看看下面这些配置是什么鬼？（本节参考资料）我们针对不同的环境，需要做一些符合其要求的配置，才能尽可能的达到我们想要的目的。但不得不说的是，标准API中的控件、海报、自动播放未必有效。移动浏览器不允许自动播放。可以试试静音下自动播放是否支持上述通过source设置不同媒体源的方案。某些浏览器可能无法识别它。比如加载监控数据和获取视频数据的场景，canplay和canplaythrough在不同系统版本的设备上支持程度不同。一般我们会使用兼容性好的onloadedmetadata来获取视频的时长。3、事件交互行为不一致通过MediaEvents&API的检测，会发现各个环境播放进度变化，事件触发频率不同，部分事件触发时对应的状态值可能不可靠，部分场景缺失events（全屏状态改变，系统播放器劫持），seekPlay在播放的时候可能不会触发...比如部分ios环境监听canplay和canplaythrough（是否已经缓冲了足够的数据流畅播放），会loading的时候不会触发，就算preload="auto"也没用，但是在pc的chromedebugger下和android下，在loading阶段会触发，ios需要播放后才会触发。在某些环境下，从视频开始到视频显示（处理视频源数据的时间）会出现短暂的黑屏。为了避免这种黑屏，可以给视频添加一个浮层或者设置容器背景隐藏视频再播放，然后监听相关事件，当开始播放或者认为有画面的时候切换到Video界面.在某些环境下，在没有设置海报的情况下点击播放时，也会尝试加载海报，导致播放前一段时间黑屏。4.不能保证对媒体格式的支持。MP4普遍支持较好，M3U8在高版本移动环境下较好，媒体点播直播中有大量的flv播放需求。不支持原生视频。手写手机播放器目标覆盖Play/Pause/Replay拖动滚动条调整进度全屏和非全屏分享等自定义按钮实现步骤一：H5适配模板preload：该属性指定视频应在页面加载后加载.controls：默认false，后面我们自己实现控制条控件。webkit-playsinline、x5-playsinline和playsinline：播放视频时本地播放，不脱离文档流。x5-video-player-type：启用同层H5播放器，即视频全屏时，div可以呈现在视频层，这也是安卓版微信x5独有的属性-video-orientation：声明播放器支持的方向：landscape横屏，portraitt竖屏x5-video-player-fullscreen:全屏设置：true支持全屏播放，false不支持全屏播放。object-fill:fill（播放器会被强制填充，视频比例可能会改变）/contain（视频会按比例播放，宽度和高度不能同时填充播放器）/...第二步：海报原理：在视频上面放一个div容器，让容器填充视频组件。通过设置div的背景图像来加载图像。.video-poster{position:absolute;左：0；顶部：0；宽度：100%；高度：100%；z-指数：3；//显示在视频组件顶层background-repeat:no-repeat;背景大小：100%100%；//100%填充background-position:50%;//居中第三步：实现滚动条进度控制支持点击进度条调整进度，拖动圆点调整进度：放置一个滚动条容器，其中包含一个实际的进度区域和一个圆点元素.currentTime决定进度条进度activity的进度条长度/进度条总长度=currentTime/duration通过传入不同的currentTimes，可以实现不同的进度显示。在此基础上，可以封装全屏进度条和非全屏进度条，包括播放/暂停等动作。进度条推进方案有两种：活动进度条长度100%，活动进度条初始向左偏移100%，设置超出容器隐藏。使用translateX按计算的距离控制移动。优点：前进很流畅缺点：横竖屏切换时，需要重新计算位置。进度由活动进度条的长度控制，范围为0-100%。.发现前行时闪烁是可以接受的，采用第二种方案。//活动控件样式publicgetWindowActiveMoveStyle():Object{constpercent=this.currentTime/this.duration;return{'width':`${Math.round(percent*10000)/100}%`,'background-color':`${this.activeControlBarColor}`};}点击进度条转为currentTime//点击进度条转为currentTime|[];//IOS>=6consttouchedClientX=e.touches[0].clientX;consttouchedClientY=e.touches[0].clientY;const{left=1,top=0,width=0,height=0}=clientRects[0]||{};/**根据是否全屏，计算方式也不同：主要是旋转后一些属性值发生了变化*/constunit=this.fullscreen?高度宽度;consttouchedClientUnit=this.fullscreen?touchedClientY:touchedClientX;constpositionUnit=this.fullscreen?左上方;return(touchedClientUnit-positionUnit)/unit*this.duration;}第四步：实现全屏播放全屏后屏幕尺寸设置：video{//object-fit:fill;这将填充该区域，一些问题object-fit:contain}非全屏时，播放画面大小受外容器限制；如何在全屏z-index:100中不受外层容器限制全屏；宽度：100vmax；高度：100vmin；变换原点：左上角；变换：旋转（90度）平移（0，-100vmin）；背景色：#000；需要注意屏幕旋转后转换为currentTimeprivategetTouchedTime(e:TouchEvent):number{.../**根据是否全屏，计算方式也不同：主要是因为一些属性值旋转后有变化*/constunit=this.fullscreen?高度宽度;consttouchedClientUnit=this.fullscreen?touchedClientY:touchedClientX;constpositionUnit=this.fullscreen?左上方;return(touchedClientUnit-positionUnit)/unit*this.duration;}其他全局加载this.videoRef.addEventListener('waiting',()=>{this.isLoading=true;},false);断线处理publicmounted(){//网络状态处理window.addEventListener('offline',this.handleNetwork,false);window.addEventListener('online',this.handleNetwork,false);}privatehandleNetwork(){if(navigator.onLine){this.isOnline=true;}else{this.isOnline=错误的;}}边距问题处理细节返回按钮和进度条/播放按钮的位置要考虑曲面屏的进度圈。应保留填充以防止点丢失整体。loading下需要一个遮罩层来显示加载动画并调高播放浏览器上的每个图标（白色）和进度条都需要一个遮罩层来防止视频内容为白色时不显示参考资料：H5-视频问题：H5-Video能做什么&存在的坑H5视频标签最佳实践视频格式理解：视频播放那些事