CODEWITHSUNDEEP
javascriptvue.js
grpaiva
grpaiva

Reputation: 582

Vue.js application using Viddler's video player

Hello fellow developers!

I started learning Vue.js yesterday, and loved it! Now I'm trying to build a little application that uses Vue (1.0.28) to display a small online course. There is a JSFiddle link in the bottom of this post, but first, let me explain my problem:

In this application's javascript file I first create a const called course_bundle, that contains the course's information such as title, chapters and files. Then, using Vue I display the course on the screen.

All chapters contains videos, and inside my Vue instance I initiate the player (the video is hosted on viddler) using Viddler's API:

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

So far, so good. The problem is when I try to load another video, by clicking on the chapter's title, the video gets duplicated. I wanted to stop the active video and then start the next one.

I might be doing something wrong, so any ideas would be very very welcome.

Here's what I have so far: https://jsfiddle.net/grpaiva/bkadrz9h/

Cheers!

Upvotes: 2

Views: 1299

Answers (1)

Bert
Bert

Reputation: 82439

Playing around with your fiddle I was able to get the video to swap using a component, but I converted it to Vue 2 in the process. If that's not what you want, carry on :)

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,
  },
});

Template

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

Updated fiddle.

Upvotes: 1

Related Questions