Vue Videojs

by Nick Hulea

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.18.3/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.3.3/videojs-contrib-hls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/2.3.2/Youtube.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.18.3/video-js.css">
<div id="app">

 <video  id="main-video-new" class="video-js vjs-big-play-centered" controls  preload data-setup="{ }">
    <source src="http://d358e1ucm4b8j9.cloudfront.net/museum/education/docents/Richard_Meier_1.mp4" type="video/mp4">
  </video> 
  
  <a href="#" v-on:click.prevent="showVideoModal({'id':'main-video','poster':'','videos':[{'src':'http://d358e1ucm4b8j9.cloudfront.net/museum/education/docents/Hillary_Clinton.mp4','type':'video/mp4'}]})">Click</a>

<!-- <div v-html="this.newvideo" ref="videoRef"  width="300" height="150"></div> -->
</div>

CSS

h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

.video-js {
  margin: 0 auto !important;
}

.video-list li {
  margin-bottom: 20px;
}

#app {
  text-align: center;
}

JavaScript

// Set global option for videojs.
// videojs.options.autoplay = true
videojs.options.techOrder = ["html5", "flash", "youtube"]

new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue.js!',
    newvideo: '',
    src: '',
    type: 'video/mp4',
    currPlayer: {}
  },
  mounted: function mounted() {
    //videojs("main-video")
  },
  methods: {
    showVideoModal: function(arr) {
      if (arr) {
        this.source = arr;
        //this.newvideo = '<video id="main-video-new" width="300" height="150" class="video-js vjs-big-play-centered" controls width="300" height="150" preload="none" data-setup="{ }"><source src=' + this.source.videos[0].src + ' type = ' + this.source.videos[0].type + '></video>';
        //videojs("main-video-new")
        this.currPlayer = videojs("main-video-new")
        this.src = this.source.videos[0].src;
        this.currPlayer.src({
          type: 'video/mp4',
          src: this.source.videos[0].src
        });
        // this.src = this.source.videos[0].src;
        this.currPlayer.options.preload = true;
        this.currPlayer.load();


        //this.currPlayer = videojs("main-video-new")
        //console.log(this.currPlayer)
      } else {
        this.currPlayer.pause();
      }
    }
  }
})

//https://www.youtube.com/watch?v=7CVtTOpgSyY
//http://vjs.zencdn.net/v/oceans.mp4

// {
//        src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',
//        type: 'application/x-mpegURL'
//      },