vue-mediaelement

video live player

Install

$ npm install vue-mediaelement

Import

Import using module

Import components to your project:

require('vue-mediaelement/dist/vue-mediaelement.css');

// in ES6 modules
import { Mediaelement } from 'vue-mediaelement';

// in CommonJS
const { Mediaelement } = require('vue-mediaelement');

// in Global variable
const { Mediaelement } = VueMediaelement;

And register components:

Vue.component('mediaelement', Mediaelement);

Import using script tag

<link rel="stylesheet" href="../node-modules/vue-mediaelement/dist/vue-mediaelement.css" charset="utf-8">
<script src="../node-modules/vue-mediaelement/dist/vue-mediaelement.js"></script>

const vueMediaelement = VueMediaelement.Mediaelement;

new Vue({
  el: 'body',
  components: {
    'mediaelement': vueMediaelement
  }
});

Usage

Work on a Vue instance:

<mediaelement class="my-play"></mediaelement>

.my-play {
  height: 200px;
  text-align: center;
}

Options

Props

| Option | Type | Description | Default | | ----- | ----- | ----- | ----- | | source | String | Specifies the URL of the video file; this value can also be indicated with source tags (refer to the Multiple Codecs section for more information) | '' | | width | String | Sets the width of the video player in pixels; you can also indicate percentages | 480 | | height | String | Sets the height of the video player in pixels; you can also indicate percentages | 270 | | preload | String | Specifies if and how the author thinks the video should be loaded when the page loads; possible values: auto, metadata or none (recommended) | none | | autoplay | Boolean | Specifies that the video will start playing as soon as it is ready | false | | forceLive | Boolean | If set to true, the Live Broadcast message will be displayed and progress bar will be hidden, no matter if duration is a valid number | true |

Events

| Event Name | Type | Description | | ----- | ----- | ----- | | success | callback | Action(s) that will be executed as soon as the source is loaded; passes 2 arguments: media (the wrapper that mimics all the native events/properties/methods for all renderers) and node (the original HTML video, audio or iframe tag where the media was loaded originally; if html5 is being used, media and node are the basically the same) | | error | callback | Action(s) that will be executed if source doesn't load for any reason. Passes same arguments as success |

FAQ

How to programminly mediaelement to an item?

Use ref and call remove() method.

this.$refs.mediaelement.remove(newIndex)

For more details, please refer to example code.

Development

Watching with hot-reload:

$ npm run dev

Develop on real remote device:

$ npm run remote-dev {{ YOUR IP ADDRESS }}

License

MIT