3.0.1 • Published 2 years ago
@cycjimmy/h5-video-player v3.0.1
H5 Video Player
- Browser full screen H5 video player. (Demo)
- h5-video-player has been renamed to @cycjimmy/h5-video-player for scoped NPM package.
Install
$ npm install @cycjimmy/h5-video-player --save
# or
$ yarn add @cycjimmy/h5-video-player
Use
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 typesoptions
context
: Element|String Context Wrapper Element. Default'body'
.control
: Boolean Whether the user can control. Defaultfalse
.autoPlay
: Boolean Whether to play immediately after loading. Defaultfalse
.autoClose
: Boolean Whether to close immediately when the video played off. Defaulttrue
.preload
: Boolean Whether to preload the video. Defaulttrue
.orientation
: String landscape / portrait. Default'portrait'
.aspectRatio
: Number Set video aspect ratio. Default9 / 16
(when orientation is portrait) or16 / 9
(when orientation is landscape).disableRotation
: Boolean Whether to prohibit automatic rotation. Defaultfalse
.picMode
: Boolean picture mode (no playButton). Defaultfalse
.fixAndroidWechatContinue
: Boolean Whether compatible with Wechat(Android) play after Forced to pause. Defaultfalse
.hooks
: Object The hook function
function
load()
: init videoplay()
: video playpause()
: video pause
Use in browser
<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>
CDN
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>