Vue-vue-h5-video-PROSAGA-码农传奇

A H5 video component for vue

feature

Auto size when playing;
Suport custom init width and height;
Suport speed and retreat when playing;
Suport full screen when playing

install

 npm i vue-h5-video --save

import methods

global import

import { H5Video } from 'vue-h5-video';
Vue.use(H5Video);

import in some component

import { H5Video } from 'vue-h5-video';
export default {
  components: {
    H5Video,
  },
};

usage

<h5-video
  @play="play"
  initHeight="480px"
  :sources="sources"
  poster="http://img.v.trend.mi.rozbuzz.com/wemedia/cover/89c3cf50ae0911e8988e593b4fd90442/61d6562ed1a7c506d50a8e7c67f949fb.png-290.webp"
  src="http://intl.w.xk.miui.com/451a4b2ff292392e9eb85907904645ce"
>
</h5-video>

props：

prop	type	default	explain
src	String	undefined	video’s source link
poster	String	undefined	video’s poster
title	String	‘’	video’s title
showControlBar	Boolean	true	allow control
sources	Array	[]	video’s source link
autoplay	Boolean	false	autoplay when video is loaded
loop	Boolean	false	replay when playing is end
preload	String	‘auto’	load method ,must be one of ‘auto’,’mete’ or ‘none’
initWidth	String	‘100%’	init video’s width
initHeight	String	‘auto’	init video’s height
iconWidth	String	‘4%’	size of play and pause icon
playIcon	String	default path	custom playIcon
pauseIcon	String	default path	custom pauseIcon
hasWatermark	Boolean	false	support watermark
watermark	String	undefined	watermark url
watermarkWidth	Boolean	60px	size of watermark
errMsg	String	‘加载失败，请检查网络！’	error tip

events

event name
play
pause
ended
canplay
error
timeupdate