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