Application of VIDEOJS video plug-in in react

1. Introduction Video.js Video Plugin

1.1 Brief Introduction

Video.js is a generic JS library that embeds video players on a Web page, supporting both the computer and the mobile side. Video.js automatically detects the browser's support for HTML5, and if HTML5 is not supported, the Flash Player is used. Plugin download, if you want to support the low version of IE, click here to download.

1.2 Getting Started with

(1) Loading CSS files and JS files

　　　　

　　(2) Add HTML5 video tags to the page

　　　

　　　　ID: is the ID.

　　　　class: Video-js and Vjs-default-skin, the former is JS recognition, the latter load CSS, are necessary.

　　　　Poster: The initial diagram of the playback.

data-setup:　　　　 The page is ready to be loaded automatically.

　　　　source: point to video. There are three video formats available,mp4/webm/ogg.

(3) simple application Video.js

　　　　

 　　　　 The aboveSet auto PlayThe code is added to the code behind the HTML. Here are a few common methods:
 　　　 
 　　　  Get object: var Myplayer = VJs ("My_video_1″");
　　　
Played: Myplayer.play ();

Suspension: Myplayer.pause ();

Get the progress bar: var whereyouat = Myplayer.currenttime ();

Set Playback progress: Myplayer.currenttime (120);

Buffer: var whathasbeenbuffered = myplayer.buffered ();

Buffering of percentages: var howmuchisdownloaded = Myplayer.bufferedpercent ();

Sound size (between 0-1): var howloudisit = Myplayer.volume ();

Set Sound size: Myplayer.volume (0.5);

Set width: myplayer.width (640);

Set Height: myplayer.height (480);

Fullscreen: Myplayer.enterfullscreen ();

Add Event: var myFunc = function () {
//Do something when the event is fired
};
myplayer.addevent ("EventName", MyFunc);
Delete event: myplayer.removeevent ("EventName", MyFunc);

Note: Need to know more detailed use method, can be viewed on video.js official website .

2. Practical application of the project

　　The project adopts react front-end frame technology, combining front and rear technical background. The specific application of video.js in the project is as follows:

(1) Asynchronously load the CSS file and JS file, and set the size of the video, whether or not to play automatically.

　　

　(2) Define the entity to be available for back-office data.

　　

　　(3) Write HTML. The three video formats that source points to are placed inside an array.

　　

　　Click the button to refresh the data.

　　

　(4) Final effect

　　

Application of VIDEOJS video plug-in in react