Javascript 使用Viddler'；s视频播放器

各位开发者好

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

在这个应用程序的javascript文件中，我首先创建一个名为

course\u bundle

的

const

，其中包含课程的信息，如标题、章节和文件。然后，使用Vue在屏幕上显示课程

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

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

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

我可能做错了什么，所以任何想法都是非常受欢迎的

以下是我目前掌握的情况：

---

干杯

我可以用一个组件交换视频，但在此过程中我将其转换为Vue 2。如果这不是你想要的，继续：）

Vue.component（“视频播放器”{
道具：[“视频id”]，
模板：``，
安装的（）{
this.embed=新ViddlerEmbed({
videoId:this.video\u id，
目标：这个。$refs.player，
自动播放：“正确”，
键入：“视频”，
宽度：“100%”
});
this.embed.manager.events.on（'videoPlayer:end'，function（））{
警报（“视频结束”）；
});  
}
})
//创建Vue实例
新Vue({
el:“#应用程序”，
数据：{
CourseTile:course\u bundle.general[0]。标题，
章节：课程，章节，
活动：课程包。章节[0]。视频\u id，
文件：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>

{{courseTitle}}
{{chapter.title}}

---

更新。

Genius！！谢谢你，伯特。我使用的是Vue 1，因为这是我正在学习的课程中使用的版本。但您的代码给了我一些输入，我将尝试使用Vue 1，否则我将使用Vue 2。

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