Recommend an easy to use video player component

Time:2021-5-13

Recommend an easy to use video player component

background

The designer wants to make a landing page, which has a video player, so he searched in the afternoon, wasting a lot of time, and finally found a suitable one.

Hope to meet similar needs in the future, after reading this articleMake an impression and avoid the pit

text

To find a suitable player, I skillfully open Google, as shown in the figure:

Recommend an easy to use video player component

The first is thisGriffithWhen I look at this picture, it’s what I want

Recommend an easy to use video player component

Griffith’s drawbacks

Then happily began the installation, debugging.

At the beginning, everything was beautiful. After the installation, a series of problems began to be exposed

  • The type is inconsistent with the document
  • Fullscreen click is invalid
  • Error message must be passed, and if it is passed, the playback failure will be displayed directly..

And a lot of problems that haven’t been fixed:

Recommend an easy to use video player component

With a hard to find online demo:

https://codesandbox.io/embed/…

At first, I tried to fix the problem of full screen by changing the parameters, but it failed in the end.

Dplayer to save

After a series of attempts, we found a satisfactory player:DPlayer.

Its advantages:

  • Complete documentation
  • Rich API
  • Active ecology
  • Support for multiple formats
  • Complete plug-ins
  • Support barrage
  • Rich shortcut keys
  • Support live barrage

Recommend an easy to use video player component

I use the react version, and the introduction is very simple:

import DPlayer from 'react-dplayer';
<DPlayer
  options={{
    video: {
      url: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
    },
    lang: 'en',
  }}

Also supportDouble speedandLoop Playback:

Recommend an easy to use video player component

You can also set the switching definition, video cover, custom progress bar prompt point and so on. You can view the parameters in detail.

error in type

It should be noted that the official does not provide the type, so if you use ts, there may be a warning:

Recommend an easy to use video player component

No type:

Recommend an easy to use video player component

terms of settlement

staydeclares.d.tsFile, manually declare it.

Recommend an easy to use video player component

Problem solving.

epilogue

Nothing to summarize, just interested in friends can try to leave an impression.

above.

thank you.