h5-video-player v1.2.1

H5 Video Player

Browser full screen H5 video player. (Releases | Demo)

This package has been deprecated

This package has been migrated to @cycjimmy/h5-video-player for scoped NPM package. Please switch to @cycjimmy/h5-video-player to stay up to date.

Install

$ npm install h5-video-player --save
# or
$ yarn add h5-video-player

Use

import H5VideoPlayer from 'h5-video-player';
# OR
const H5VideoPlayer = require('h5-video-player');

const videoPlayer = new H5VideoPlayer(source, [, options]);
videoPlayer.load();

• source: Video source allows three types
  • String: Video url. E.g: 'video.mp4'
  • Object: Video url and type. E.g: {url: 'video.mp4', type:'mp4'}
  • Array: E.g: [{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.
  • hookInPlay: Function The hook function when the video play.
  • hookInPause: Function The hook function when the video pause.
  • hookInStop: Function The hook function when the video stop.

• function

  • load(): init video
  • play(): video play
  • pause(): video pause

Use in browser

<div id="videoWrapper"></div>
<script src="H5VideoPlayer.min.js"></script>
<script>
  var source = 'media/video.mp4';
  var 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/h5-video-player@1/build/H5VideoPlayer.min.js"></script>