@cycjimmy/h5-video-player

Browser full screen H5 video player


Keywords
h5, video, fullscreen
License
MIT
Install
npm install @cycjimmy/h5-video-player@3.0.2

Documentation

H5 Video Player

libraries dependency status libraries sourcerank Coverage Status Release date rollup semantic-release jest npm license

  • Browser full screen H5 video player. (Demo)
  • h5-video-player has been renamed to @cycjimmy/h5-video-player for scoped NPM package.

Install

NPM version NPM bundle size npm download

$ 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 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.
    • 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 video
    • play(): video play
    • pause(): 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

jsdelivr

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>