Question

你好开发人员了！

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

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

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

course_bundle

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

我可能做错了，所以任何想法都会非常受欢迎。

以下是我到目前为止的内容：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。

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

1 个答案: