关于解决 Vue video 在微信浏览器 iOS 和安卓不展示封面图的问题

Posted 2023-04-23

参考技术A 1. 解决 video 再 safari 浏览器中默认大屏播放，不小屏播放问题  设置：

 x5-video-player-type="h5" 

  x5-playsinline  playsinline  webkit-playsinline="true"

2. safari 浏览器第一帧没有加载出来

<video

        :src="playSrc"

        style="width: 100%;"

        controls="controls"

        preload="auto"

        id="vediodiv"

        x5-video-player-type="h5"

        x5-playsinline  playsinline  webkit-playsinline="true"

        @ended="handleEnd"

        @loadeddata="handleLoadData"

      >此视频暂无法播放，请稍后再试</video>

//请求数据后调用

 handleLoadData()

      var video = document.getElementById("vediodiv");

  //这一步可以解决 安卓微信中封面图的问题  但是ios微信打开封面图还是加载不出来

      video.setAttribute("poster", this.posterImg);

// 解决 iOS 问题

const u = navigator.userAgent;

    const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

if (isiOS)

  console.log('is iOS ')

  //解决iOS 微信 poster不展示的问题

      if (window.WeixinJSBridge)

        WeixinJSBridge.invoke(

          "getNetworkType",

          ,

          function (e)

            video.play();

            setTimeout(() =>

              video.pause();

            , 200);

          ,

          false

        );

      else

        document.addEventListener(

          "WeixinJSBridgeReady",

          function ()

            WeixinJSBridge.invoke("getNetworkType", , function (e)

              video.load();

              video.play();

              setTimeout(() =>

                video.pause();

              , 200);

            );

          ,

          false

        );

     

     

    ,

    handleGotoPlay(index)

      this.currentIndex = index;

      this.currentDto = this.videoDtoList[index];

      this.playSrc = this.currentDto.url;

      this.imageSrc = this.currentDto.imageUrl;

      this.videoName = this.currentDto.videoTitle;

      this.setWxTitle();

      setTimeout(() =>

        var video = document.getElementById("vediodiv");

        video.play();

      , 200);

    ,

关于安卓手机在微信浏览器中无法调起相机的原因

最近功在做公司的一个项目，遇到安卓手机在微信浏览器中更换头像无法调起相机的问题，特来此记录一下。

1.微信没有相机权限，开启就行了。

2.〈input type=“file” accept=“image/*”/〉。图库和相机都能调起。

3.部分冷门手机因系统原因不开放调起相机的权限，无法解决。