vue.js 비디오를 캐시하고 재생하십시오.

Question

저는 vue.js의 세계가 아주 새로워졌으며 특정한 경우에 빠졌습니다.

리소스 로더를 사용하여 캐싱 시스템을 약간했는데 이미지와 비디오를 미리로드하고 데이터를 배열에 넣습니다. 모든 것이 잘 작동하지만 지금은 동영상 요소를 만들고 재생하는 방법을 모르겠습니다.

은 내가 절-에 할 수 없어 때로는 이미지, 그리고 다른 시간이 비디오 때문에 ... 어떻게 해야할지 모르겠어요

!

가 여기 내 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(); 
    } 
} 

입니다 그리고 이것은 내 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> 

---

편집이다 : 나는 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> 

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> 

내가 네트워크 관리자의 확인은 능숙 한 번만로드합니다.

Answer 1

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

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> 

내가 네트워크 관리자의 확인은 능숙 한 번만로드합니다.