H5 Video Player

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

Install

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

Use

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

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

• source: Video source allows three types

  • [String]: Video url. E.g: 'Avengers: Endgame'
  • [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'.
  • positioned: [Boolean] Whether the context element has been positioned. Default false.
  • 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] Video aspect ratio. Default 9 / 16.
  • 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>