$ npm install @cycjimmy/h5-video-player --save
# or
$ yarn add @cycjimmy/h5-video-player
import H5VideoPlayer from '@cycjimmy/h5-video-player';
# OR
const H5VideoPlayer = require('@cycjimmy/h5-video-player');
const videoPlayer = new H5VideoPlayer(source, [, options]);
videoPlayer.load();
source
: Video source allows three types
'video.mp4'
{url: 'video.mp4', type:'mp4'}
[{url: 'video.mp4', type:'mp4'},{},...]
options
context
: [Element|String] Context Wrapper Element. Default 'body'
.control
: [Boolean] Whether the user can control. Default false
.autoPlay
: [Boolean] Whether to play immediately after loading. Default false
.autoClose
: [Boolean] Whether to close immediately when the video played off. Default true
.preload
: [Boolean] Whether to preload the video. Default true
.orientation
: [String] landscape / portrait. Default 'portrait'
.aspectRatio
: [Number] Set video aspect ratio. Default 9 / 16
(when orientation is portrait) or 16 / 9
(when orientation is landscape).disableRotation
: [Boolean] Whether to prohibit automatic rotation. Default false
.picMode
: [Boolean] picture mode (no playButton). Default false
.fixAndroidWechatContinue
: [Boolean] Whether compatible with Wechat(Android) play after Forced to pause. Default false
.hooks
: [Object] The hook function
play
: [Function] The hook function when the video play.pause
: [Function] The hook function when the video pause.stop
: [Function] The hook function when the video stop.function
load()
: init videoplay()
: video playpause()
: video pause<div id="videoWrapper"></div>
<script src="h5-video-player.umd.min.js"></script>
<script>
const source = 'media/video.mp4';
const video = new H5VideoPlayer(source, {
context: '#videoWrapper',
[...options]
}).load();
</script>
To use via a CDN include this in your HTML:
<script src="https://cdn.jsdelivr.net/npm/@cycjimmy/h5-video-player@3/dist/h5-video-player.umd.min.js"></script>