vue-player

A Vue2 H5 video player 基于vue2的H5播放器

Getting Start

Installation

npm install vue-player -S

Usage

register VuePlayer globally

import Vue from 'vue'
import VuePlayer from 'vue-player'
import 'vue-player/vue-player.min.css'

Vue.use(VuePlayer)

<template>
	<div>
		<vue-player :src="src"></vue-player>
	</div>
</template>

<script>

export default {
	data() {
		return {
			src: url
		}
	}
}
</script>

simple exmple

<template>
	<div>
		<vue-player :src="src" ref="player"></vue-player>
	</div>
</template>

<script>

export default {
	data() {
		return {
			src: url
			newSrc: newUrl
		}
	},
	methods: {
		/**
		 * play video or play new video
		 * @method playVdieo
		 */
		playVdieo() {
			this.$refs.player.play(this.newSrc)
			/* or this.$refs.player.play() */
		},
		/**
		 * pauseVdieo
		 * @method pauseVdieo
		 */
		pauseVdieo() {
			this.$refs.player.pause()
		},
	}
}
</script>

Error notification

<template>
	<div>
		<vue-player :src="src">
			<h1 slot="err"> Video resource error </h1>  <!-- src = null or error -->
		</vue-player>
	</div>
</template>