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

矫情吗；* 2022-12-22 12:27 377阅读 0赞

**页面使用如下：**

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

**最后找到方法如下：**

在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>