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

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)

    },

如果你觉得现在手头上没有什么好的场景，但是你以前自己照片图库里有好的视频，也是可以直接调用的，对了，记得给他访问照片的权限哦。

可以给视频加上LOGO：

我们还可以给这些小的片段加上文字、LOGO等，这样可以看起来更加的有电影的艺术气息，这些LOGO、文字可以在软件里免费去解锁下载。

拍摄时候也而已在进行修改：

如果预设的方案不好的话，我们拍摄的过程 当中也可以重新拍摄，拍摄界面里也有画幅的大小，最上面是滤镜，可以左右滑动来改变。

在发送前进行预览：

在我们制作好了之后是可以预览的，哪一段效果不好可以点击哪一段，然后点击垃圾桶 进行删除，可以重新添加，再进行编辑。

可以直接在软件中管理我们分享、发布的视频：

制作好的视频，你也许分享到了很多的平台，你自己都快忘记了，也不要担心，软件里可以直接删除发布源的视频，这样其他平台也就看不到了。

最近接手新项目，从后端变前端，有一点前端基础但是对于Vue一无所知。

一切从零开始，此次需求是项目中有一个视频播放功能。以下做一个简单示例共大家参考。

使用的插件是 vue-vedio-player

输入如下命令

在main.js里面导入并引用

视频路径写法：

1.视频上传到服务器写法（在JS中找到src更换为你的视频路径）

2.本地视频路径写法

在assets目录下新建video文件夹导入视频testVideo即可

设置视频封面: poster

图片路径在assets目录下

---