1.1.8 • Published 2 years ago

vue-h5-video-fork v1.1.8

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago

A H5 video component for vue

Build Status

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:

proptypedefaultexplain
srcStringundefinedvideo's source link
posterStringundefinedvideo's poster
titleString''video's title
showControlBarBooleantrueallow control
sourcesArray[]video's source link
autoplayBooleanfalseautoplay when video is loaded
loopBooleanfalsereplay when playing is end
preloadString'auto'load method ,must be one of 'auto','mete' or 'none'
initWidthString'100%'init video's width
initHeightString'auto'init video's height
iconWidthString'4%'size of play and pause icon
playIconStringdefault pathcustom playIcon
pauseIconStringdefault pathcustom pauseIcon
hasWatermarkBooleanfalsesupport watermark
watermarkStringundefinedwatermark url
watermarkWidthBoolean60pxsize of watermark
errMsgString'加载失败,请检查网络!'error tip

events

event name
play
pause
ended
canplay
error
timeupdate