video标签适配移动端

css .vid-wrap{ width:100%;background: #000; position:relative; padding-bottom:56.25%; /*需要用padding来维持16:9比例,也就是9除以16*/ height: 0; } .vid-wrap video{ position: absolute; top

业务需求背景：由于业务中涉及到有视频播放的内容，所以就使用了video标签去做，但是video标签在ios 设备和安卓设备中的默认行为不一致，故记录下解决方法（折中办法）。

安卓和浏览器适配做得很好，只需要设置好文件类型和，最后返回文件的二进制流即可。但是ios客户端还需要设置文件大小才能正确播放。我只做了MP4格式的视频，其他格式的视频暂时还没有试过，百度看了下，其他视频文件可能会涉及到视频编码的问题。在手机端上播放视频，流量很贵，像我的做法的话都是一次性返回整个文件的二进制流，这样过于暴力，后续优化的时候，可能要设置另外的响应头，进行分段返回。比如响应头中是获取文件的部分内容。分段返回文件二进制流的实现方式。

解决办法 ：目前使用了三种办法来播放视频，分别针对微信内置浏览器（不分ios和android）、ios系统下的其他浏览器和安卓系统下的其他浏览器。1、微信内置浏览器微信浏览器可以直接使用video标签来播放视频，ios端和安卓端都可以适配。主要是通过微信内置的h5同层播放器来拜托浏览器对video标签的挟持，从而实现自定义video标签。代码如下：2、ios系统ios系统下的其他浏览器，需要使用canvas来不断绘制出video视频，再放到页面中去，这样就可以避免video标签被浏览器挟持的问题。

<template> <div class='videomp4' @dblclick="clickFun()"> <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"

video 标签在移动端的适配，折腾了几天。主要问题是移动端的video并没有像pc端上在dom加载完会加载视频内容，导致了移动端的视频播放延迟以及video的黑屏问题。解决办法一开始尝试了网络说的canvas取视频第一帧作为poster，其实并没有用，canvas取到的video的并不是第一帧，而是个黑色的背景。后来尝试了server端通过ffmpeg截取视频的第一帧作为poster，一开始感觉完美解决了，后来突然某天点击播放会闪个黑屏，还是手机端没有预加载视频内容（真机调试过iphone上的Safari

video的属性，让其不覆盖住头部栏（这个方法在安卓的百度浏览器上是可以处理悬浮的问题，但是在UC浏览器上还是无法生效的）但是我现在做的项目有出现一个问题，就是在安卓手机上显示视频页面，当视频处于自动播放的时候，当点击自定义下拉框的时候，播放的视频会悬浮在自定义的头部栏上。四、如果在其他浏览器上没问题，但是在UC浏览器上还是浮在自定义的头部的问题，可以设置以下 的属性值，就可以处理这个问题（亲测试生效）三、设置以上VIdeo上的属性，VIdeo的视频显示在手机UC浏览器上还是会覆盖自定义头部标签栏。

做直播的可能用得着播放控件，但是全屏H5是不需要的，那么去除全屏播放时候的控件，需要以下设置：同层播放。启用同层H5播放器，就是在视频全屏的时候，div可以呈现在视频层上，也是WeChat安卓版特有的属性。同层播放别名也叫做沉浸式播放，播放的时候看似全屏，但是已经除去了control和微信的导航栏，只留下"X"和"