1.3.19 • Published 6 months ago

softbuilders-react-video-player v1.3.19

Weekly downloads
-
License
ISC
Repository
-
Last release
6 months ago

Usage

install the package

    npm i softbuilders-react-video-player

How to use

import SoftBuildersVideoPlayer, {
  SoftBuildersVideoPlayerOptions,
  SoftBuildersVideoPlayerChapter,
  SoftBuildersVideoPlayerNote,
} from "softbuilders-video-player";

const options: SoftBuildersVideoPlayerOptions = {
  autoplay: false,
  controls: true,
  muted: true,
  fluid: true,
  poster: "http://example.com/thumbnail.png", // thumbnail preview image
  height: 420,
  width: 720,
  sources: [
    {
      src: "https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.360p.vp9.webm",
      type: "video/webm",
      label: "360p",
    },
    {
      src: "https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.1080p.vp9.webm",
      type: "video/webm",
      label: "1080P",
    },
  ],
  tracks: [
    {
      kind: "captions",
      src: "https://raw.githubusercontent.com/brenopolanski/html5-video-webvtt-example/master/MIB2-subtitles-pt-BR.vtt",
      srclang: "en",
      label: "English",
      memeType: "text/vtt", // text/vtt or text/srt
      default: true,
    },
    {
      kind: "captions",
      src: "https://gist.githubusercontent.com/samdutton/ca37f3adaf4e23679957b8083e061177/raw/e19399fbccbc069a2af4266e5120ae6bad62699a/sample.vtt",
      srclang: "es",
      label: "Espaniol",
      memeType: "text/vtt", // text/vtt or text/srt
    },
  ], // only vtt suptitilers are supported for now
};

const initNotes: SoftBuildersVideoPlayerNote[] = [
  {
    time: 5,
    label: "Start",
  },
  {
    time: 30,
    label: "Say Hello",
  },
  {
    time: 69,
    label: "Go deep",
  },
  {
    time: 99,
    label: "Details ...",
  },
  {
    time: 140,
    label: "End",
  },
];

const initChapters: SoftBuildersVideoPlayerChapter[] = [
  {
    startTime: 25,
    endTime: 50,
    title: "01 Note: **** Important ****",
  },
  {
    startTime: 70,
    endTime: 100,
    title: "02 Note: To Do",
  },
  { startTime: 110, endTime: 120, title: "03 Note: DIY (Do it yourself)" },
  {
    startTime: 125,
    endTime: 140,
    title: "05 Note: Conclusion ",
  },
];

const Component = () => {
  const handleSaveNoteAction = (time: number, note: string) => {
    return new Promise((resolve) => {
      resolve(true);
    });
  };

  const onPause = (time: number) => {
    console.log(`Video has been Paused at time (${time} sec)`);
  };
  const onPlay = (time: number) => {
    console.log(`Video has been Played at time (${time} sec)`);
  };

  return (
    <SoftBuildersVideoPlayer
      options={options}
      chapters={initChapters}
      notes={initNotes}
      handleSaveNoteAction={handleSaveNoteAction}
      onPause={onPause}
      onPlay={onPlay}
    />
  );
};

export default Component;
1.2.8

8 months ago

1.2.7

8 months ago

1.2.6

8 months ago

1.2.5

8 months ago

1.2.4

8 months ago

1.2.3

8 months ago

1.2.1

8 months ago

1.3.9

7 months ago

1.3.8

7 months ago

1.2.12

8 months ago

1.2.13

8 months ago

1.2.10

8 months ago

1.2.11

8 months ago

1.2.16

8 months ago

1.2.17

8 months ago

1.2.14

8 months ago

1.2.15

8 months ago

1.2.9

8 months ago

1.3.10

7 months ago

1.3.13

7 months ago

1.3.14

7 months ago

1.3.11

7 months ago

1.3.12

7 months ago

1.3.17

6 months ago

1.3.18

6 months ago

1.3.15

7 months ago

1.3.16

7 months ago

1.3.19

6 months ago

1.2.18

8 months ago

1.2.19

8 months ago

1.3.7

7 months ago

1.3.6

7 months ago

1.3.5

7 months ago

1.3.4

7 months ago

1.3.3

7 months ago

1.3.2

7 months ago

1.3.1

7 months ago

1.3.0

7 months ago

1.2.20

8 months ago

1.2.23

8 months ago

1.2.24

8 months ago

1.2.21

8 months ago

1.2.22

8 months ago

1.2.0

8 months ago

1.1.74

8 months ago

1.1.77

8 months ago

1.1.76

8 months ago

1.1.75

8 months ago

1.1.70

8 months ago

1.1.73

8 months ago

1.1.72

8 months ago

1.1.71

8 months ago

1.1.63

8 months ago

1.1.62

8 months ago

1.1.61

8 months ago

1.1.60

8 months ago

1.1.67

8 months ago

1.1.66

8 months ago

1.1.65

8 months ago

1.1.64

8 months ago

1.1.69

8 months ago

1.1.68

8 months ago

1.1.59

9 months ago

1.1.58

9 months ago

1.1.57

9 months ago

1.1.56

9 months ago

1.1.55

9 months ago

1.1.54

9 months ago

1.1.53

9 months ago

1.1.52

9 months ago

1.1.51

9 months ago

1.1.50

9 months ago

1.1.49

9 months ago

1.1.48

9 months ago

1.1.47

9 months ago

1.1.46

9 months ago

1.1.45

9 months ago

1.1.44

9 months ago

1.1.43

9 months ago

1.1.42

9 months ago

1.1.41

9 months ago

1.1.40

9 months ago

1.1.39

9 months ago

1.1.38

9 months ago

1.1.37

9 months ago

1.1.36

9 months ago

1.1.35

9 months ago

1.1.34

9 months ago

1.1.33

9 months ago

1.1.32

9 months ago

1.1.31

9 months ago

1.1.30

9 months ago

1.1.29

9 months ago

1.1.28

9 months ago

1.1.27

9 months ago

1.1.26

9 months ago

1.1.25

9 months ago

1.1.24

9 months ago

1.1.23

9 months ago

1.1.22

9 months ago

1.1.21

9 months ago

1.1.20

9 months ago

1.1.19

9 months ago

1.1.18

9 months ago

1.1.17

9 months ago

1.1.16

9 months ago

1.1.15

9 months ago

1.1.14

9 months ago

1.1.13

9 months ago

1.1.12

9 months ago

1.1.11

9 months ago

1.1.10

9 months ago

1.1.9

9 months ago

1.1.8

9 months ago

1.1.7

9 months ago

1.1.6

9 months ago

1.1.5

9 months ago

1.1.4

9 months ago

1.1.3

9 months ago

1.1.2

9 months ago

1.1.1

9 months ago

1.1.0

9 months ago

1.0.9

9 months ago

1.0.8

9 months ago

1.0.7

10 months ago

1.0.6

10 months ago

1.0.5

10 months ago

1.0.4

10 months ago

1.0.3

10 months ago

1.0.2

10 months ago

1.0.1

10 months ago

1.0.0

10 months ago