Vue.js

Minimal component sample

Copy

Copied

'use strict'

Vue.component('flowplayer', {
  props: ['token', 'src', 'poster', 'ratio', 'autoplay'],
  template: '<div>',

  mounted: function () {
    this.player = flowplayer(this.$el, this.$props)
  },

  destroyed: function() {
    this.player.destroy()
  }

})

Init

Copy

Copied

var app = new Vue({ el: "#player" })

Embed

Copy

Copied

<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css"></div>
<div id="demo"><div id="player">
  <flowplayer token="[your token]" ratio="960:400" src="//edge.flowplayer.org/bauhaus.mp4" poster="https://flowplayer.com/media/img/demos/minimalist.jpg"></flowplayer>
  </div>
  </div>