vuevideo（vuevideo 自定义按钮）

本篇文章给大家谈谈vuevideo，以及vuevideo 自定义按钮对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、关于解决 Vue video 在微信浏览器 iOS 和安卓不展示封面图的问题
• 2、videojs在vue中的使用（自定义组件，如清晰度）
• 3、vuevideo基于vue.js的视频播放器组件
• 4、vuevideo切换声音不变
• 5、vuevideo设置可拖拽的字幕

关于解决 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);

    },

videojs在vue中的使用（自定义组件，如清晰度）

该方式使用以创建好的video标签，只是简单的改变video的src。注意，此时的明搭扰自定义组件（如清晰度）并没有更新，里面的数据还是上一个视频的信息，需要手动更新，可以手动移除后再添加。

该方式首先会调用dispose方法销毁已经创建的video标签，并移除所有的组件和监听事件，然后需要自己创建video并设置其id（注意该id不能与之枝吵前销毁的id相同，我也不知道为啥～ :) ）和class以及src，然后将创建的video添加到文档中，如上html的结构，将作为id= vWrap的子元素添加到文档中。

一开始在项目中使用dplayer做为视频的播放库，但是由于在孤儿浏览器上出现兼容问题