一# vue怎么边下载边播放mp4

第一步package.json的dependencies添加{}中的代码然后 npm i

"dependencies": {
 "flv.js": "^1.6.2",
  "video.js": "^7.17.0",
  "videojs-flash": "^2.2.1",
  "videojs-flvjs-es6": "^1.0.1",
  },

第二步在需要的页面中引入

import Videojs from 'video.js'
import 'video.js/dist/video-js.css'
import "videojs-flvjs-es6";
import "videojs-flash";

第三步页面中加入video标签

  <video  id="mmiid" class="video-js vjs-big-play-centered vjs-fluid" controls preload="auto" width="100%" height="100%"></video>

第四部步mounted中初始化代码

this.videoPlayer = Videojs(document.querySelector('#mmiid'), {
      autoplay: true,//自动播放
      controls: false,//用户可以与之交互的控件
      loop: false,//视频一结束就重新开始
      muted: false,//默认情况下将使所有音频静音
      // aspectRatio: "16:9",//显示比率
      fullscreen: {
        options: { navigationUI: 'hide' }
      },
      techOrder: ["html5", "flvjs"],// 兼容顺序
      flvjs: {
        mediaDataSource: {
          isLive: false,
          cors: true,
          withCredentials: false
        }
      },
      sources: [{ src: '../../../../.mp4', type: "video/mp4" }]
    })

第五部步请求后台数据this.$nextTick()中修改url重新加载video

 getAdVideo().then((res) => {
          if (res.data.resultCode == 200) {
              this.$nextTick(() => {
                this.videoPlayer.ready(function () {
                  var obj = this;
                  obj.src(res.data.bizBody.adIcon);
                  obj.load();
                });
          }
        })

第一次写简书不喜勿喷！！！！