Vodplayer NPM | npm.io

VODPlayer

VODPlayer is a Web Video player which built from HTML5 and other third party libraries.

Formats of video supported are mp4, flv, m3u8 and VR Video.

Install

npm install vodplayer

Params

Required

Prop	Description	Default
`videoSource`	The URL of Video file(mp4, flv, m3u8)

Optional

Prop	Description	Default
`autoplay`	Playback automatically	false
`loop`	Continuous loop of video	0
`muted`	mute	0
`control`	Show the control panel	1
`coverpic`	The URL of cover picutre
`focusJson`	Highlights of the video, e.g. '{"cutImage":"","title":"highlight1","startPoint":"121","endPoint":"185","id":52},{"cutImage":"","title":"highlight2","startPoint":"221","endPoint":"285","id":533}'
`starttime`	Playback at this time. (autoplay must be false)
`endtime`	Stop video at this time. (autoplay must be false)
`vr`	Panoramic Video is 1	0
`threeJSPath`	The URL of three.js. If vr is 1, required.
`flvJSPath`	The URL of flv.js. If videoSource is .flv, required.
`hlsJSPath`	The URL of hls.js. If videoSource is .m3u8, required.
`requireJSPath`	The URL of require.js. If needing to load three.js/flv.js/hls.js, required.

Usage

Vue.js

Player.vue

<template>
  <div id="id" ref="player"></div>
</template>

<script>
import { VODPlayer } from 'vodplayer'  

export default {
  name: 'Player',

  mounted() {
    new VODPlayer(this.$refs.player, {
      autoplay:false,
      videoSource: '//www.w3school.com.cn/i/movie.mp4'
    })
  }
}
</script>

<style scoped>
#id {
  height: 400px;
}
</style>

React

App.js

import React from 'react';
import { VODPlayer } from "vodplayer";

function App() {
  let playerRef = null;

  function init() {
    new VODPlayer(playerRef, {
      autoplay:false,
      videoSource:"//www.w3school.com.cn/i/movie.mp4"
    })
  }

  return (
    <div className="App">
      <div ref={p => {playerRef = p; init();}}></div>

      <style>{`
        .App {
          height: 400px;
        }
      `}</style>
    </div>
  );
}

export default App;