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 (권장)	없음
자동 플레이	부울	비디오가 준비 되 자마자 재생을 시작하도록 지정합니다.	거짓
사형	부울	True로 설정되면 라이브 브로드 캐스트 메시지가 표시되고 진행률 바가 숨겨집니다. 지속 시간이 유효한 숫자이든	진실

이벤트

이벤트 이름	유형	설명
성공	콜백	소스가로드 되 자마자 실행되는 조치; 2 인수를 통과합니다 : 미디어 (모든 렌더러에 대한 모든 기본 이벤트/속성/메소드를 모방하는 래퍼) 및 노드 (원래 HTML 비디오, 오디오 또는 Iframe 태그가 원래로드 된 경우, HTML5가 사용되는 경우, 미디어와 노드는 기본적으로 동일합니다).
오류	콜백	소스가 어떤 이유로 든로드되지 않으면 실행되는 조치 (S). 성공과 같은 주장을 전달합니다

FAQ

항목에 대한 미디어 요소를 프로그래밍하는 방법은 무엇입니까?

ref를 사용하고 remove() 메소드를 호출하십시오.

 this . $refs . mediaelement . remove ( newIndex )

자세한 내용은 예제 코드를 참조하십시오.

개발

핫 레드로드로 시청 :

$ npm run dev

실제 원격 장치에서 개발 :

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

특허

MIT