Javascript vue.js缓存视频并播放

我是vue.js世界的新手，我对某个案例感到迷茫

我使用ResourceLoader做了一个小的缓存系统，它预加载我的图像和视频，并将数据放入一个数组中。一切正常，但现在，我不知道如何创建我的视频元素，所以播放它

我不能做v-for，因为有时候是图像，有时候是视频

我不知道该怎么办

这是我的App.vue

<template>
  <div>

    <div class="loader" v-show="progress < 100">
      <h1>{{ progress }}%</h1>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data () {
    return {
      progress: 0,
      cache: {}
    }
  },

  // Static manifest
  manifest: [
    './static/img/intro/test.jpg',
    './static/video/intro/bg.mp4',
    './static/video/intro/bg.webm',
    './static/video/home/scroll.mp4',
    './static/video/home/scroll.webm',
    './static/sound/home/sanik.mp3',
  ],

  ready: function() {
    let Loader = require('resource-loader');
    let loader = new Loader();

    let manifest = this.$options.manifest;

    manifest.forEach(function(file) {
        loader.add(file);
    });

    let that = this;
    loader.on('progress', function(event, resource){
      that.progress = Math.round(event.progress);
      console.log('progress', this.progress);
      let sequence = [];
      sequence = resource.url.split('/');
      sequence = sequence[sequence.length - 2];
      if(that.cache[sequence] === undefined) that.cache[sequence] = {};
      that.cache[sequence][resource.name] =
        {
          url: resource.url,
          data: resource.data
        }
      ;
    });

    loader.on('complete', function(event, resources){
      that.$broadcast('cache-loaded', 'that.cache');
      that.$route.router.go('/intro');
    });

    loader.load();
  }
}

{{progress}}}%
导出默认值{
数据（）{
返回{
进展：0，
缓存：{}
}
},
//静态清单
舱单：[
“./static/img/intro/test.jpg”，
“./static/video/intro/bg.mp4”，
“./static/video/intro/bg.webm”，
“./static/video/home/scroll.mp4”，
“./static/video/home/scroll.webm”，
“./static/sound/home/sanik.mp3”，
],
就绪：函数（）{
let Loader=require（'resource-Loader'）；
let loader=new loader（）；
让manifest=this.$options.manifest；
forEach（函数（文件）{
添加（文件）；
});
让那=这；
loader.on（'progress'，函数（事件，资源）{
that.progress=Math.round（event.progress）；
console.log（'progress'，this.progress）；
让序列=[]；
sequence=resource.url.split（'/'）；
序列=序列[sequence.length-2]；
如果（that.cache[sequence]==未定义）that.cache[sequence]={}；
that.cache[sequence][resource.name]=
{
url:resource.url，
数据：resource.data
}
;
});
loader.on（'complete'，函数（事件、资源）{
that.$broadcast（'cache-loaded'，'that.cache'）；
那就是.route.router.go（'/intro'）；
});
loader.load（）；
}
}

这是我的简介

<template>
  <h1>INTRO</h1>
  <a v-link="{ path: '/home' }">Continue to Home</a>
</template>

<script>

export default {
  name: 'Intro',
  components: {},

  events: {
    'cache-loaded' : function(cached){
      console.log(this.$root.cache['intro']['./static/img/intro/test.jpg']);
      // ok it shows my element and what's next ??
    }
  }
}
</script>

简介
继续回家
导出默认值{
名称：“简介”，
组件：{}，
活动：{
“缓存已加载”：函数（缓存）{
log（this.$root.cache['intro']['./static/img/intro/test.jpg']）；
//好的，它显示了我的元素和下一步是什么？？
}
}
}

---

编辑：我找到了不附加HTML原始元素的解决方案，而是使用vue的本机数据绑定

App.vue

<template>
  <div class="">

    <div class="loader" v-show="progress < 100">
      <h1>{{ progress }}%</h1>
    </div>
    <router-view></router-view>

  </div>
</template>

<script>
export default {
  data () {
    return {
      progress: 0,
      img_cache: [],
      vid_cache: []
    }
  },

    // Static manifest
    manifest: [
      './static/intro/img/test.jpg',
      './static/intro/video/bg.mp4',
      './static/intro/video/bg.webm',
      './static/home/video/scroll.mp4',
      './static/home/video/scroll.webm'
    ],

    ready: function() {
      let Loader = require('resource-loader');
      let loader = new Loader();

      let that = this;
      let manifest = that.$options.manifest;

      manifest.forEach(function(file) {
          loader.add(file, file);
      });

      loader.on('progress', function(event, resource){
        that.progress = Math.round(event.progress);
        console.log('progress', this.progress);

        if(resource.url.match(/\.(jpe?g|png|gif|bmp)$/i)){
          that.img_cache.push({
            'name': resource.name,
            'src': resource.url
          });
        }else {
          that.vid_cache.push({
            'name': resource.name,
            'src': resource.url
          })
        }
      });

      loader.on('complete', function(event, resources){
        console.log('COMPLETE');
        that.$route.router.go('/intro');
      });

      loader.load();
    }
}
</script>

<template>
  <div class="">

    <div class="loader" v-show="progress < 100">
      <h1>{{ progress }}%</h1>
    </div>
    <router-view></router-view>

  </div>
</template>

<script>
export default {
  data () {
    return {
      progress: 0,
      img_cache: [],
      vid_cache: []
    }
  },

    // Static manifest
    manifest: [
      './static/intro/img/test.jpg',
      './static/intro/video/bg.mp4',
      './static/intro/video/bg.webm',
      './static/home/video/scroll.mp4',
      './static/home/video/scroll.webm'
    ],

    ready: function() {
      let Loader = require('resource-loader');
      let loader = new Loader();

      let that = this;
      let manifest = that.$options.manifest;

      manifest.forEach(function(file) {
          loader.add(file, file);
      });

      loader.on('progress', function(event, resource){
        that.progress = Math.round(event.progress);
        console.log('progress', this.progress);

        if(resource.url.match(/\.(jpe?g|png|gif|bmp)$/i)){
          that.img_cache.push({
            'name': resource.name,
            'src': resource.url
          });
        }else {
          that.vid_cache.push({
            'name': resource.name,
            'src': resource.url
          })
        }
      });

      loader.on('complete', function(event, resources){
        console.log('COMPLETE');
        that.$route.router.go('/intro');
      });

      loader.load();
    }
}
</script>

{{progress}}}%
导出默认值{
数据（）{
返回{
进展：0，
img_缓存：[]，
视频缓存：[]
}
},
//静态清单
舱单：[
“./static/intro/img/test.jpg”，
“./static/intro/video/bg.mp4”，
“./static/intro/video/bg.webm”，
“./static/home/video/scroll.mp4”，
“./static/home/video/scroll.webm”
],
就绪：函数（）{
let Loader=require（'resource-Loader'）；
let loader=new loader（）；
让那=这；
让manifest=that.$options.manifest；
forEach（函数（文件）{
添加（文件，文件）；
});
loader.on（'progress'，函数（事件，资源）{
that.progress=Math.round（event.progress）；
console.log（'progress'，this.progress）；
if（resource.url.match（/\（jpe？g | png | gif | bmp）$/i））{
那是.img_cache.push({
“名称”：resource.name，
“src”：resource.url
});
}否则{
那是({
“名称”：resource.name，
“src”：resource.url
})
}
});
loader.on（'complete'，函数（事件、资源）{
console.log（'COMPLETE'）；
那就是.route.router.go（'/intro'）；
});
loader.load（）；
}
}

简介

<template>
  <h1>INTRO</h1>
  <a v-link="{ path: '/home' }">Continue to Home</a>

  <div class="" v-for="itm in $root.vid_cache">
    <video v-bind:src="itm.src" autoplay loop>
    </video>
  </div>

</template>

<script>
import Loader from './Loader'

export default {
  name: 'Intro',
  components: {Loader},
  ready: function(){
    console.log('READY');
  }
}
</script>

<template>
  <h1>INTRO</h1>
  <a v-link="{ path: '/home' }">Continue to Home</a>

  <div class="" v-for="itm in $root.vid_cache">
    <video v-bind:src="itm.src" autoplay loop>
    </video>
  </div>

</template>

<script>
import Loader from './Loader'

export default {
  name: 'Intro',
  components: {Loader},
  ready: function(){
    console.log('READY');
  }
}
</script>

简介
继续回家
从“./Loader”导入加载程序
导出默认值{
名称：“简介”，
组件：{Loader}，
就绪：函数（）{
console.log（'READY'）；
}
}

---

我在网络检查器中进行了检查，Resources只加载一次。

我找到了不附加HTML原始元素的解决方案，而是使用vue的本机数据绑定

App.vue

<template>
  <div class="">

    <div class="loader" v-show="progress < 100">
      <h1>{{ progress }}%</h1>
    </div>
    <router-view></router-view>

  </div>
</template>

<script>
export default {
  data () {
    return {
      progress: 0,
      img_cache: [],
      vid_cache: []
    }
  },

    // Static manifest
    manifest: [
      './static/intro/img/test.jpg',
      './static/intro/video/bg.mp4',
      './static/intro/video/bg.webm',
      './static/home/video/scroll.mp4',
      './static/home/video/scroll.webm'
    ],

    ready: function() {
      let Loader = require('resource-loader');
      let loader = new Loader();

      let that = this;
      let manifest = that.$options.manifest;

      manifest.forEach(function(file) {
          loader.add(file, file);
      });

      loader.on('progress', function(event, resource){
        that.progress = Math.round(event.progress);
        console.log('progress', this.progress);

        if(resource.url.match(/\.(jpe?g|png|gif|bmp)$/i)){
          that.img_cache.push({
            'name': resource.name,
            'src': resource.url
          });
        }else {
          that.vid_cache.push({
            'name': resource.name,
            'src': resource.url
          })
        }
      });

      loader.on('complete', function(event, resources){
        console.log('COMPLETE');
        that.$route.router.go('/intro');
      });

      loader.load();
    }
}
</script>

<template>
  <div class="">

    <div class="loader" v-show="progress < 100">
      <h1>{{ progress }}%</h1>
    </div>
    <router-view></router-view>

  </div>
</template>

<script>
export default {
  data () {
    return {
      progress: 0,
      img_cache: [],
      vid_cache: []
    }
  },

    // Static manifest
    manifest: [
      './static/intro/img/test.jpg',
      './static/intro/video/bg.mp4',
      './static/intro/video/bg.webm',
      './static/home/video/scroll.mp4',
      './static/home/video/scroll.webm'
    ],

    ready: function() {
      let Loader = require('resource-loader');
      let loader = new Loader();

      let that = this;
      let manifest = that.$options.manifest;

      manifest.forEach(function(file) {
          loader.add(file, file);
      });

      loader.on('progress', function(event, resource){
        that.progress = Math.round(event.progress);
        console.log('progress', this.progress);

        if(resource.url.match(/\.(jpe?g|png|gif|bmp)$/i)){
          that.img_cache.push({
            'name': resource.name,
            'src': resource.url
          });
        }else {
          that.vid_cache.push({
            'name': resource.name,
            'src': resource.url
          })
        }
      });

      loader.on('complete', function(event, resources){
        console.log('COMPLETE');
        that.$route.router.go('/intro');
      });

      loader.load();
    }
}
</script>

{{progress}}}%
导出默认值{
数据（）{
返回{
进展：0，
img_缓存：[]，
视频缓存：[]
}
},
//静态清单
舱单：[
“./static/intro/img/test.jpg”，
“./static/intro/video/bg.mp4”，
“./static/intro/video/bg.webm”，
“./static/home/video/scroll.mp4”，
“./static/home/video/scroll.webm”
],
就绪：函数（）{
let Loader=require（'resource-Loader'）；
let loader=new loader（）；
让那=这；
让manifest=that.$options.manifest；
forEach（函数（文件）{
添加（文件，文件）；
});
loader.on（'progress'，函数（事件，资源）{
that.progress=Math.round（event.progress）；
console.log（'progress'，this.progress）；
if（resource.url.match（/\（jpe？g | png | gif | bmp）$/i））{
那是.img_cache.push({
“名称”：resource.name，
“src”：resource.url
});
}否则{
那是({
“名称”：resource.name，
“src”：resource.url
})
}
});
loader.on（'complete'，函数（事件、资源）{
console.log（'COMPLETE'）；
那就是.route.router.go（'/intro'）；
});
loader.load（）；
}
}

简介

<template>
  <h1>INTRO</h1>
  <a v-link="{ path: '/home' }">Continue to Home</a>

  <div class="" v-for="itm in $root.vid_cache">
    <video v-bind:src="itm.src" autoplay loop>
    </video>
  </div>

</template>

<script>
import Loader from './Loader'

export default {
  name: 'Intro',
  components: {Loader},
  ready: function(){
    console.log('READY');
  }
}
</script>

<template>
  <h1>INTRO</h1>
  <a v-link="{ path: '/home' }">Continue to Home</a>

  <div class="" v-for="itm in $root.vid_cache">
    <video v-bind:src="itm.src" autoplay loop>
    </video>
  </div>

</template>

<script>
import Loader from './Loader'

export default {
  name: 'Intro',
  components: {Loader},
  ready: function(){
    console.log('READY');
  }
}
</script>

简介
继续回家
从“./Loader”导入加载程序
导出默认值{
名称：“简介”，
组件：{Loader}，
就绪：函数（）{
console.log（'READY'）；
}
}

---

我在网络检查器中进行了检查，Resources只加载一次。

我找到了不附加HTML原始元素的解决方案，而是使用vue的本机数据绑定

App.vue

<template>
  <div class="">

    <div class="loader" v-show="progress < 100">
      <h1>{{ progress }}%</h1>
    </div>
    <router-view></router-view>

  </div>
</template>

<script>
export default {
  data () {
    return {
      progress: 0,
      img_cache: [],
      vid_cache: []
    }
  },

    // Static manifest
    manifest: [
      './static/intro/img/test.jpg',
      './static/intro/video/bg.mp4',
      './static/intro/video/bg.webm',
      './static/home/video/scroll.mp4',
      './static/home/video/scroll.webm'
    ],

    ready: function() {
      let Loader = require('resource-loader');
      let loader = new Loader();

      let that = this;
      let manifest = that.$options.manifest;

      manifest.forEach(function(file) {
          loader.add(file, file);
      });

      loader.on('progress', function(event, resource){
        that.progress = Math.round(event.progress);
        console.log('progress', this.progress);

        if(resource.url.match(/\.(jpe?g|png|gif|bmp)$/i)){
          that.img_cache.push({
            'name': resource.name,
            'src': resource.url
          });
        }else {
          that.vid_cache.push({
            'name': resource.name,
            'src': resource.url
          })
        }
      });

      loader.on('complete', function(event, resources){
        console.log('COMPLETE');
        that.$route.router.go('/intro');
      });

      loader.load();
    }
}
</script>

<template>
  <div class="">

    <div class="loader" v-show="progress < 100">
      <h1>{{ progress }}%</h1>
    </div>
    <router-view></router-view>

  </div>
</template>

<script>
export default {
  data () {
    return {
      progress: 0,
      img_cache: [],
      vid_cache: []
    }
  },

    // Static manifest
    manifest: [
      './static/intro/img/test.jpg',
      './static/intro/video/bg.mp4',
      './static/intro/video/bg.webm',
      './static/home/video/scroll.mp4',
      './static/home/video/scroll.webm'
    ],

    ready: function() {
      let Loader = require('resource-loader');
      let loader = new Loader();

      let that = this;
      let manifest = that.$options.manifest;

      manifest.forEach(function(file) {
          loader.add(file, file);
      });

      loader.on('progress', function(event, resource){
        that.progress = Math.round(event.progress);
        console.log('progress', this.progress);

        if(resource.url.match(/\.(jpe?g|png|gif|bmp)$/i)){
          that.img_cache.push({
            'name': resource.name,
            'src': resource.url
          });
        }else {
          that.vid_cache.push({
            'name': resource.name,
            'src': resource.url
          })
        }
      });

      loader.on('complete', function(event, resources){
        console.log('COMPLETE');
        that.$route.router.go('/intro');
      });

      loader.load();
    }
}
</script>

{{progress}}}%
导出默认值{
数据（）{
返回{
进展：0，
img_缓存：[]，
视频缓存：[]
}
},
//静态清单
舱单：[
“./static/intro/img/test.jpg”，
“./static/intro/video/bg.mp4”，
“./static/intro/video/bg.webm”，
“/统计