vue mediaelement

Vue-Medielement

Видео вживую

Установить

$ npm install vue-mediaelement

Импорт

Импорт с использованием модуля

Импортируйте компоненты в ваш проект:

 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 ;

И зарегистрировать компоненты:

 Vue . component ( 'mediaelement' , Mediaelement ) ;

Импорт с использованием тега сценария

 < 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
  }
} ) ; 

Использование

Работайте над экземпляром Vue:

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

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

Параметры

Реквизит

Вариант	Тип	Описание	По умолчанию
источник	Нить	Определяет URL -адрес видеофайла; Это значение также может быть указано с помощью источников (см. Раздел «Несколько кодеков» для получения дополнительной информации)	''
ширина	Нить	Устанавливает ширину видеоплеера в пикселях; Вы также можете указать проценты	480
высота	Нить	Устанавливает высоту видеоплеера в пикселях; Вы также можете указать проценты	270
предварительная нагрузка	Нить	Указывает, и как автор считает, что видео следует загружать при загрузке страницы; Возможные значения: auto , metadata или none (рекомендуется)	никто
Автозап	Логический	Указывает, что видео начнет играть, как только оно будет готово	ЛОЖЬ
заканчивая	Логический	Если будет установлено значение True, будет отображаться в прямом эфире, и будет спрятан планшечный план	истинный

События

Название события	Тип	Описание
успех	перезвонить	Действие (ы), которое будет выполнено, как только источник загружен; Пропускает 2 аргументы: носитель (обертка, которая имитирует все нативные события/свойства/методы для всех визуализаторов) и узел (оригинальное HTML -видео, аудио или тег iframe, где носитель был загружен первоначально; если HTML5 используются, ножен и узел в основном одинаковы) являются одинаковыми) являются одинаковыми) являются одинаковыми) являются одинаковыми) являются одинаковыми) являются одинаковыми).
ошибка	перезвонить	Действие (ы), которое будет выполнено, если источник не загружается по какой -либо причине. Передает те же аргументы, что и успех

Часто задаваемые вопросы

Как программировать медиаэлементу на элемент?

Используйте ref и вызов remove() метод.

 this . $refs . mediaelement . remove ( newIndex )

Для получения более подробной информации, пожалуйста, обратитесь к примеру кода.

Разработка

Смотрю с горячей нагрузкой:

$ npm run dev

Разработать на реальном удаленном устройстве:

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

Лицензия

Грань