Videojs use experience

In the project I have done recently, I chose VideoJs for the technology selection. The common file types of live streaming protocols support playing. However, due to the lack of relevant documents on the Internet, I still stepped on a lot of holes.

Live streaming protocol

Common live streaming protocols are classified as follows:

• RTMP/RTSP/RTSP/RTSP/RTSP/RTSP
• Http-FLV
• HLS

Live streaming protocol introduction link: click here.

VideoJs initialization

VideoJs plays m3U8 type files. There are several types of initialization.

/* react; * /
let player;
useEffect(() = >{
	const video = document.getElementsByTagName("video") [0];
	if(video){
		player=videojs(
		document.getElementById('id'),
		{
			 controls: true.// Whether to display the control bar
  			 poster: 'xxx'.// Video cover image address
 			 preload: 'auto'.autoplay: false.fluid: true.// Adaptive width and height
  			 language: 'zh-CN'.// Set the language
  			 muted: false.// Whether to mute
  			 inactivityTimeout: false.controlBar: { // Set the control bar component
    		'currentTimeDisplay':true, 'timeDivider':true, 'durationDisplay':true, 'remainingTimeDisplay':false, volumePanel: { inline: false, } */
   			 /* Use the children form to control the position of each control and whether it is displayed or not */
   			 children: [{name: 'playToggle'}, // Play button
      			{name: 'currentTimeDisplay'}, // The current playing time
     		    {name: 'progressControl'}, // Play the progress bar
     		    {name: 'durationDisplay'}, / / total time
      			{ // Multiple playback
        			name: 'playbackRateMenuButton'.'playbackRates': [0.5.1.1.5.2.2.5] {},name: 'volumePanel'.// Volume control
        			inline: false.// Do not use horizontal mode
      			},
      				{name: 'FullscreenToggle'} / / full screen]},sources: [/ / video source
      				{
         		 		src: / * * /,
          				type: 'application/x-mpegURL'.poster: '//vjs.zencdn.net/v/oceans.png'}},() = >{
				/* Here are some player methods and related logic handling such as */player.play(); }}}), [])/* Must be called within the page destruction lifecycle, otherwise page destruction will continue to request live streams */
{
	player.dispose();
}
Copy the code

May you also be able to be like Chen 11, not forget the original heart, heart to the sun