George Abitbol George Abitbol - 5 months ago 45
Node.js Question

vue.js cache video and play it

I'm quite new in vue.js world and I'm lost with a certain case.

I did a little caching system using resource-loader, it preloads my images and videos and puts the data in a array. Everything works fine but now, I don't know how to create my video element and so play it.

I can't do a v-for because sometimes it's an image, and other time it's a video...

I don't know what to do !

Here is my 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();
}
}


And this is my intro.vue

<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>





EDIT : I found the solution to not append the HTML raw element, instead I use the vue's native data binding.

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>


Intro.vue

<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>


I checked in the network inspector, the ressources load only once.

Answer

I found the solution to not append the HTML raw element, instead I use the vue's native data binding.

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>

Intro.vue

<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>

I checked in the network inspector, the ressources load only once.

Comments