IPlayer

🤩 IPlayer —— A modern video player for vue2, which supports hls, flv and mp4.

👉🏻 中文文档

Install

npm install -S vue-iplayer

Quick Start

use as component

<template>
  <div>
      <IPlayer src="https://d2zihajmogu5jn.cloudfront.net/sintel/master.m3u8"/>
  </div>
</template>
<script>
import { IPlayer } from 'vue-iplayer'
export default {
    components: {
        IPlayer
    }
}
</script>

use in global

import Vue from 'vue';
import App from './index.vue';
import IPlayer from 'vue-iplayer';

Vue.config.productionTip = false;
Vue.use(IPlayer);

new Vue({
  render: (h) => h(App),
}).$mount('#app');

Examples

hls：

<IPlayer
  src="https://d2zihajmogu5jn.cloudfront.net/sintel/master.m3u8"
  :muted="true"
  :step="20"
  :controls="true"
  :controlsList="['fastforward', 'shot', 'fullscreen', 'loop', 'rate']"
/>

flv：

<IPlayer
  src="https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv"
  :muted="true"
  :step="20"
  :controls="true"
  :controlsList="['fastforward', 'shot', 'fullscreen', 'loop', 'rate']"
/>

MP4：

<IPlayer
  src="https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4"
  :muted="true"
  :step="20"
  :controls="true"
  :controlsList="['fastforward', 'shot', 'fullscreen', 'loop', 'rate']"
/>

Usage

Attributes

Attribute	Description	Type	Accepted Values	Default
src	the src of video, such as 'https://d2zihajmogu5jn.cloudfront.net/sintel/master.m3u8'	String	—	—
height	height of the video.	String	—	300
width	width of the video.	String	—	500
autoplay	autoplay when loaded	Boolean	—	true
controls	show control bar	Boolean	—	true
muted	muted when starting playing	Boolean	—	true
options	Prossible attributes of options: sources, controls, autoplay, muted. Remember that options has higher priority than other properties, for example, if you config muted: true and {options: {muted: false}}, it'll work as muted is true.	Object	—	true
controlsList	new attribute of version 2.0. The meaning of each configuration item is listed below: rewind: rewind, which gap is defined by attribute "step"; shot: to show shot button, when click it, 'shot' event will be emitted; fastforwrad: fastforward, the same with rewind; fullscreen: vodeo is played in full screen ; loop: to loop when video ends playing;	Array	['rewind', 'fastforward', 'shot', 'fullscreen', 'loop']	['rewind', 'fastforward', 'fullscreen', 'rate'];
step	Configure the number of seconds to fast forward and rewind.	Number	—	10
rates	config the playback rates.	Array	—	[1,1.5,2,2.5]
volume	initial volume of this video, which value is in range of [0,1]	Number	—	0.5
type	MSE type of the video, if type is empty, it will calculate the type by src.	String	hls/flv/mp4	''

Events

Event Name	Description	Parameters
shot	fires when 'shot' button is clicked。	{blob: ''}

Transparent transmission of all events listed in MDN DOC with the same name. Includes:

• abort
• canplay
• canplaythrough
• durationchange
• emptied
• ended
• error
• loadeddata
• loadedmetadata
• loadstart
• pause
• play
• playing
• progress
• ratechange
• seeked
• seeking
• stalled
• suspend
• timeupdate
• volumechange
• waiting

License

MIT

Copyright (c) 2022-present, dqdandan