Skip to content

Latest commit

 

History

History
117 lines (80 loc) · 2.86 KB

README.md

File metadata and controls

117 lines (80 loc) · 2.86 KB
Raw

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