Skip to content

cycjimmy/h5-video-player

Folders and files

NameName
Last commit message
Last commit date

Latest commit

719d3af · Oct 24, 2019

History

32 Commits
Oct 24, 2019
Oct 24, 2019
Oct 15, 2019
Oct 15, 2019
Oct 15, 2019
Oct 15, 2019
Oct 14, 2019
Oct 14, 2019
Sep 14, 2017
Oct 23, 2017
Oct 14, 2019
Oct 14, 2019
Oct 15, 2019
Sep 14, 2017
Oct 24, 2019
Oct 24, 2019
Oct 24, 2019
Oct 14, 2019
Oct 24, 2019
Oct 24, 2019

Repository files navigation

H5 Video Player

NPM version build status David deps devDependencies Status npm download jsdelivr npm license

  • Browser full screen H5 video player. (Releases | 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 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.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/@cycjimmy/h5-video-player@2/build/h5-video-player.min.js"></script>