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

執照

麻省理工學院