微信浏览器--IOS安卓video中的坑点

最新推荐文章于 2024-04-17 17:44:17 发布

原创最新推荐文章于 2024-04-17 17:44:17 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了解决微信浏览器中video标签自动全屏及播放完毕后出现广告的问题，并提供了一个Vue示例代码，展示了如何通过样式控制实现全屏播放。

刚好项目中有使用video,便自己预先写了个demo

发现在微信浏览器中用video会有不小的坑，网上大部分说的集中的主要是

1、安卓/IOS播放自动全屏

2、安卓播放完毕后的广告毕竟腾讯的

<video
  id="video"
  width='100%'
  height="100%"
  controls
  src="我是资源路径"
  poster="我是封面图"
  x5-playsinline="true"
  x5-video-player-type="h5"
  x5-video-player-fullscreen="true"
  playsinline="true"
  webkit-playsinline="true"
  preload="auto"></video>

基本以上写法可以兼容双平台会出现的问题。

但是广告还是一样会有，心机呀。那么一些大平台B站直播平台是如何做到自定义视频的呢

其实他们都用了video。大家可以参考bilibli的视频然后用F12用手机预览模式。

video本身的控件去除了，自定义的播放控件栏

全屏如何操作呢？

其实全屏是通过样式进行操作。

<!--@Daniel-->
<!--已处理坑点:-->
    <!--1、在安卓微信浏览器 自带全屏播放完后 是会出现腾讯的插入广告-->
       <!--解决方法 通过样式控制全屏 ps 大型的直播平台都是通过此方法解决。-->
    <!--2、IOS播放自动全屏-->
       <!--解决方法 playsinline="true"   webkit-playsinline="true"-->
<template>
  <div class="hello">

    <div class="player-container">
                  <div class="player-box" :class="ScreenFull?'wide':''">
                      <video
                        id="video"
                        width='100%'
                        height="100%"
                        controls
                        src="资源路径"
                        poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526379463086&di=ba2de8ec594d4659b0b38099733eb200&imgtype=0&src=http%3A%2F%2Fupload.art.ifeng.com%2F2017%2F0613%2F1497334179561.jpg"
                        x5-playsinline="true"
                        x5-video-player-type="h5"
                        x5-video-player-fullscreen="true"
                        playsinline="true"
                        webkit-playsinline="true"
                        preload="auto"></video>
                  </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      ScreenFull:false //全屏控制
    }
  },

}
</script>


<style scoped>
  .player-container{
    position: relative;
    z-index: 100;
    width: 100%;
    height: 10rem;
  }
  .player-box{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
  }
  .player-box.wide{
    position: fixed;
    width: auto;
    height: auto;
  }
  video{
    background-color: #000;
  }
</style>

这个是我在Vue中写的demo。

原生H5的话可以只需要动态插入删除wide样式就可以了，就能实现微信浏览器中的'伪全屏'。

还有一些活动的H5需要进行视频中的页面铺满

对vedio加入该样式即可。

object-fit:cover;

object-fit属性由下列的值中选择一个关键字来指定。

值
fill
被替换的内容的大小，以填补该元素的内容框：对象的具体对象的大小是元素的使用宽度和高度。
contain
被替换的内容的大小，为自身宽高比不变，适应该元素的内容框的大小：它的具体对象的大小被解析为对元素的使用宽度和高度的含有约束。
cover
被替换的内容的尺寸却使元件的整个内容框，以保持其长宽比其具体的对象的大小被解析为针对元素的使用的宽度和高度的盖约束。
none
被替换的内容的尺寸却使元件的整个内容框，以保持其长宽比其具体的对象的大小被解析为针对元素的使用的宽度和高度的盖约束。
scale-down
内容的尺寸仿佛none或contain指定了，取将导致更小的具体对象的大小。
形式语法