CODEWITHSUNDEEP
vue.jsvuejs2
Vicky Nehare
Vicky Nehare

Reputation: 129

how do i convert code javascript to vue js

i am totally new in vue js. and i got task to play next video after 1st finished. here is javascript code i need to convert in vue js .

let videoSource = new Array();
videoSource[0] = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4';
videoSource[1] = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4';
let i = 0; // global
const videoCount = videoSource.length;
const element = document.getElementById("videoPlayer");

function videoPlay(videoNum) {
    element.setAttribute("src", videoSource[videoNum]);
    element.autoplay = true;
    element.load();
    element.play();
}
document.getElementById('videoPlayer').addEventListener('ended', myHandler, false);

videoPlay(0); // play the video

function myHandler() {
    i++;
    if (i == videoCount) {
        i = 0;
        videoPlay(i);
    } else {
        videoPlay(i);
    }
}

<video controls="controls" id="videoPlayer" height="200">

Upvotes: 0

Views: 394

Answers (1)

Biya Paul
Biya Paul

Reputation: 46

If you are using the cdn of vuejs, after import it you can add this code for HTML

<div id="app">
  <video controls="controls" id="videoPlayer" height="200">
</div>

and then this script code

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    videoSource: [
      'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
      'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4'
    ],
    videoCount: 0,
    elt: undefined,
    key: 0,
  },
  
  mounted ()  {
    this.videoCount = this.videoSource.length
    this.elt = document.getElementById('videoPlayer')
    
    this.elt.addEventListener('ended', this.myHandler, false)
    this.videoPlay(this.key)
    
    console.log(this.elt)
  },
  
  methods: {
    videoPlay (id) {
      this.elt.setAttribute("src", this.videoSource[id])
      this.elt.autoplay = true
      this.elt.load()
      this.elt.play()
    },
    
    myHandler () {
      this.key = this.key + 1 === this.videoCount ? 0 : this.key + 1
      this.videoPlay (this.key)
    }
  }
})

There is the link of pen the link of pen but you have to complete it for firefox and other browser.

Upvotes: 1

Related Questions