移动端video标签自动播放(兼容ios，微信)

页面使用如下：

使用如上方法之后在其他端都可正常播放，只有iOS没办法自动播放，于是就Google开始寻找方法

<script> 
     //一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以 
     document.getElementById('car_audio').play(); 
    //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 
    document.addEventListener("WeixinJSBridgeReady", function () { 
        document.getElementById('car_audio').play(); 
        document.getElementById('video').play(); 
    }, false); 
</script>

最后找到方法如下：

<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered video"
       muted autoplay preload loop
       x5-video-player-fullscreen="true"
       x5-playsinline
       playsinline
       webkit-playsinline
>
    <source src="https://malltest.gacmotor.com/myfiles/video/2020-11-11/2020-11-111605101145912/2020-11-111605101145912.MOV" type="video/mp4" >
</video>

在video标签上添加如下即可：

x5-video-player-fullscreen="true"
x5-playsinline
playsinline
webkit-playsinline

以上测试有效！！！

<video>的基本属性：

　　preload: （预加载）iPhone支持，Android不一定支持;

　   poster: （封面图片）iPhone支持，Android不一定支持;

　　autoplay: （自动播放）iPhone中的Safari不支持，webview可能被开启。Android不一定支持；

　　loop: （循环播放）iPhone支持，Android不一定支持;

　　controls: （控制条）iPhone支持，大师需要开始播放了才显示，Android基本支持;

　　width: （宽度）;

　　height: （高度）;

有时候在微信网页端插入<Video>标签的时候,不希望用户来拖动进度条的话,可以直接使用 playsinline属性,webkit-playsinline属性

如上属性配置，发现只有andorid和pc浏览器都可自动播放，iphone safari仍然不可播放，

要想iphone播放的关键，ps: 视频想要实现自动播放，貌似必须加上muted="true"属性

触发页面action调用video播放暂停：

   // 触发屏幕事件
  //--创建页面监听，页面加载完毕--触发音频播放
document.addEventListener('DOMContentLoaded', function () {
    function videoAutoPlay() {
        var video= document.getElementById('video');
        video.play();
    }
    audioAutoPlay();
});
//--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
document.addEventListener('touchstart', function () {
    function videoAutoPlay() {
        var video= document.getElementById('video');
            video.play();
    }
    videoAutoPlay();
});

从Chrome从66版本开始，为了避免打扰用户，自动播放时，必须是muted静音播放。
能不能绕过这个限制呢？不妨试试效果：

document.getElementById('homeVideo').play();
//在play之后加一个延时，清除video的muted属性
setTimeout(function(){
    document.getElementById('homeVideo').removeAttribute('muted');
}, 100);

微信浏览器：

//引入微信的js，以及写入以下js
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    document.addEventListener("WeixinJSBridgeReady", function () {
        document.getElementById("videoID").play();
    }, false);
</script>

亲测可用，但在safari上还是不行，苹果在safari on ios里面明确指出等待用户的交互动作后才能播放media，也就是说如果你没有得到用户的action就播放的话就会被safri拦截

浏览器的安全设定这没办法，但至少在微信上可以了，正常也都是微信分享

如何全屏：

object-fit: cover;（ 被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应。）

<template>
  <div>
    <nav-bar :title="title"></nav-bar>
    <div class="bg">
      <video
        class="video"
        id="video"
        x5-video-player-type="h5"
        x5-playsinline
        playsinline="true"
        webkit-playsinline="true"
        controls
        autoplay
        preload
        :src="src"
      >
        <source :src="src" />
      </video>
    </div>
  </div>
</template>

<script>
// #ifndef MP-WEIXIN
import wxConfig from "~/utils/wxSdk.js";
// #endif
export default {
  data() {
    return {
      title: "",
      src: "",
    };
  },
  mounted() {
    this.src = decodeURIComponent(this.$route.query.src);
    this.src="https://mall.gacmotor.com/myfiles/video/2020-11-22/2020-11-221606059352858/2020-11-221606059352858.mp4";
    this.title = decodeURIComponent(this.$route.query.title || "");
    let autoplay = this.$route.query.autoplay;
    let video = document.querySelector("#video");
    // var u = navigator.userAgent;
    // var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (wxConfig.videoGetNetworkType) {
      this.$nextTick(() => {
        wxConfig.videoGetNetworkType("video");
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.bg {
  background-color: black;
  width: 100vw;
  height: calc(100vh - 44px);
  padding-top: 44px;
}

.video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;/**关键代码**/
  width: 100%;
  height: 100%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

</style>