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.

English | 简体中文

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;

Contributing

VODPlayer is an open source project. I'm glad of any suggestions and bug report.

Acknowledgments

flv.js
hls.js
three.js