vue mediaelement

vue-Mediaelement

视频现场播放器

安装

$ 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 （建议）	没有任何
自动播放	布尔	指定视频准备就绪后会开始播放	错误的
forcelive	布尔	如果设置为true，则将显示实时广播消息，而进度栏将被隐藏，无论持续时间是否有效数字	真的

事件

事件名称	类型	描述
成功	打回来	一旦加载源将立即执行的操作；通过2个参数：媒体（模仿所有渲染器的所有本机事件/属性/方法的包装器）和节点（原始的HTML视频，音频或iframe标签最初加载了媒体；如果使用HTML5，则媒体和节点基本上是相同的）
错误	打回来	如果由于任何原因没有加载源，将执行的操作将执行。通过与成功相同的论点

常问问题

如何将媒体编写到项目中？

使用参考并调用remove()方法。

 this . $refs . mediaelement . remove ( newIndex )

有关更多详细信息，请参阅示例代码。

发展

与热层一起观看：

$ npm run dev

在真实的远程设备上开发：

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

执照

麻省理工学院