vue mediaelement

Vue-MedieElement

ビデオライブプレーヤー

インストール

$ 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 （推奨）	なし
オートプレイ	ブール	ビデオが準備ができたらすぐに再生を開始することを指定します	間違い
FORCERIVE	ブール	Trueに設定すると、ライブブロードキャストメッセージが表示され、期間が有効な番号であっても、プログレスバーが非表示になります	真実

イベント

イベント名	タイプ	説明
成功	折り返し電話	ソースがロードされるとすぐに実行されるアクション。 2つの引数に合格：メディア（すべてのレンダラーのすべてのネイティブイベント/プロパティ/メソッドを模倣するラッパー）およびノー​​ド（メディアが元々ロードされた元のHTMLビデオ、オーディオ、またはIFRAMEタグ; HTML5が使用されている場合、メディアとノードは基本的に同じです）
エラー	折り返し電話	ソースが何らかの理由でロードされない場合に実行されるアクション。同じ議論を成功と渡します

よくある質問

アイテムを具体的にメディアエレメントする方法は？

refとcall remove()メソッドを使用します。

 this . $refs . mediaelement . remove ( newIndex )

詳細については、サンプルコードを参照してください。

発達

ホットレロードで見る：

$ npm run dev

実際のリモートデバイスで開発する：

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

ライセンス

mit