vue mediaelement

vue-mediaelement

Video Live Player

Memasang

$ npm install vue-mediaelement

Impor

Impor menggunakan modul

Impor Komponen untuk Proyek Anda:

 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 ;

Dan mendaftar komponen:

 Vue . component ( 'mediaelement' , Mediaelement ) ;

Impor menggunakan tag skrip

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

Penggunaan

Bekerja pada contoh vue:

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

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

Opsi

Alat peraga

Pilihan	Jenis	Keterangan	Bawaan
sumber	Rangkaian	Menentukan URL file video; Nilai ini juga dapat ditunjukkan dengan tag sumber (lihat bagian beberapa codec untuk informasi lebih lanjut)	''
lebar	Rangkaian	Mengatur lebar pemutar video dalam piksel; Anda juga dapat menunjukkan persentase	480
tinggi	Rangkaian	Menetapkan ketinggian pemutar video dalam piksel; Anda juga dapat menunjukkan persentase	270
preload	Rangkaian	Menentukan apakah dan bagaimana penulis berpikir video harus dimuat saat halaman dimuat; Nilai yang mungkin: auto , metadata ATAU none (Direkomendasikan)	tidak ada
Autoplay	Boolean	Menentukan bahwa video akan mulai diputar segera setelah sudah siap	PALSU
Forcelive	Boolean	Jika diatur ke true, pesan siaran langsung akan ditampilkan dan bilah kemajuan akan disembunyikan, tidak peduli apakah durasi adalah nomor yang valid	BENAR

Acara

Nama Acara	Jenis	Keterangan
kesuksesan	panggilan balik	Tindakan yang akan dieksekusi segera setelah sumber dimuat; Melewati 2 argumen: media (pembungkus yang meniru semua peristiwa/properti/metode asli untuk semua renderer) dan node (tag video HTML asli, audio atau iframe di mana media dimuat pada awalnya; jika HTML5 digunakan, media dan node pada dasarnya sama)
kesalahan	panggilan balik	Tindakan yang akan dieksekusi jika sumber tidak memuat karena alasan apa pun. Meloloskan argumen yang sama seperti kesuksesan

FAQ

Bagaimana cara mediaEelement ke suatu item?

Gunakan metode Ref dan Call remove() .

 this . $refs . mediaelement . remove ( newIndex )

Untuk detail lebih lanjut, silakan merujuk ke contoh kode.

Perkembangan

Menonton dengan Hot-Reload:

$ npm run dev

Kembangkan di perangkat jarak jauh nyata:

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

Lisensi

Mit