The blog sorted out the implementation process of our free web on-demand/liveplayer, liveplayer. Keep an eye out.

Web broadcast player more in line with the use of the majority of people’s habits, to achieve double click full-screen effect. The current webcast player uses the open source VideoJS, and its default effect is to pause by clicking on the play area, which can only be triggered by the maximize button in the lower right corner. Here are two of the key steps that VideoJS needs to perform a little bit of surgery in order to double click full screen.

1. Click pause is disabled

Google has learned that someone has already mentioned such issues. Google can search for issues on Github by keyword, which is very nice. Click the link of this issue, and you can see that the author answered and gave the answer.

As the author points out in the figure, this is masked by the following CSS

.vjs-tech {
    pointer-events: none;
}
Copy the code

2. Enable double-click full screen

The next step is to enable double click full screen. Use a VideoJS HotKeys plug-in, this plug-in default to enable VideoJS double click full screen playback effect, and in the full screen state, double click again to exit full screen. To integrate this plug-in, there are only two steps:

1. Reference JS

< script SRC = "/ / CDN. Sc. 0.2 / gl/videojs - hotkeys/videojs. Hotkeys. Min. Js" > < / script >Copy the code

2. Configure VideoJS to enable the plug-in

Videojs ('vidId').ready(function() {this.hotkeys({volumeStep: 0.1, seekStep: 5, enableVolumeScroll: False, / / asked to disable the mouse wheel to adjust volume enableModifiersForNumbers: false}); });Copy the code

This completes the effect of double clicking the VideoJS webcast player in full screen.

Iii. Introduction to Liveplayer

Powerful web live/on-demand player, simple to use, powerful, free to use for life

  • Supports M3U8 playback;
  • Supports HTTP-FLV playback.
  • Support RTMP playback;
  • Support live broadcast and on-demand broadcast;
  • Player snapshot screenshot support;
  • Support on-demand multi definition playback;
  • Support full screen or proportional display;
  • Built-in Flash supports extreme speed and smooth mode;
  • The built-in Flash supports HTTP-FLV playback.
  • Automatic detection of Internet Explorer compatible playback;

See: www.npmjs.com/package/@li…