Vue.js应用程序中使用Viddler的视频播放器

Question

你好开发伙伴！

我开始学习Vue.js昨天，喜欢它！现在我试图构建一个使用Vue（1.0.28）的小应用程序来显示一个小的在线课程。有一个在这个岗位的底部的jsfiddle链接，但首先，让我解释一下我的问题：

在这个应用程序的JavaScript文件我首先创建一个const名为course_bundle，包含课程的信息，如标题，章节和文件。然后，使用Vue I在屏幕上显示课程。

所有章节包含了视频，我的Vue的实例内使用我Viddler的API启动播放器（视频托管在viddler）：

let embed = new ViddlerEmbed({ 
    videoId: this.active, 
    target: '#player', 
    autoplay: 'true', 
    type: 'video', 
    width: '100%' 
    }); 

到目前为止，一切都很好。问题是，当我尝试加载另一个视频时，通过点击该章节的标题，视频被复制。我想停止活动视频，然后开始下一个。

我可能会做错事，所以任何想法将是非常非常欢迎。

这是我到目前为止有：https://jsfiddle.net/grpaiva/bkadrz9h/

干杯！

Answer 1

与提琴演奏身边，我能够获得视频使用组件交换，但我是在这个过程中转换成的Vue 2。如果这不是你想要的，进行:)

Vue.component("video-player",{ 
    props:["video_id"], 
    template: `<div ref="player"></div>`, 
    mounted(){ 
    this.embed = new ViddlerEmbed({ 
     videoId: this.video_id, 
     target: this.$refs.player, 
     autoplay: 'true', 
     type: 'video', 
     width: '100%' 
    }); 
    this.embed.manager.events.on('videoPlayer:ended', function(){ 
     alert('video ended'); 
    }); 
    } 
}) 

// creates Vue instance 
new Vue({ 
    el: '#app', 
    data: { 
    courseTitle: course_bundle.general[0].title, 
    chapters: course_bundle.chapters, 
    active: course_bundle.chapters[0].video_id, 
    files: course_bundle.files, 
    }, 
}); 

模板

<div id="app" class="container"> 
    <div class="row"> 
     <video-player v-for="video in chapters" 
        :key="video.video_id" 
        :video_id="video.video_id" 
        v-if="active === video.video_id"> 
     </video-player> 
    </div> 
    <div class="row"> 
     <div class="list-group"> 

     <h5 class="list-group-item">{{ courseTitle }}</h5> 

     <div @click="active = chapter.video_id" class="list-group-item" v-for="chapter in chapters"> 

      {{ chapter.title }} 

     </div> 

     </div> 
    </div> 
    <div class="row">  
     <a :href="file.url" target="_blank" v-for="file in files"> 
     <button class="btn btn-md btn-info"> 
      <i class="fa fa-file"></i>&nbsp;&nbsp;{{ file.title }} 
     </button> 
     </a> 
    </div> 
    </div> 

更新fiddle。