:Develop LinkVisual Player for web

Background information

• LinkVisual Player for web is developed based on Video.js and the video business of LinkVisual. LinkVisual Player for web provides web player solutions for live streaming and recording playback LinkVisual Player for web supports the playback based on HTTP-FLV and HLS. For more information about LinkVisual Player for web, see Overview.

• For more information about the configurations used to implement LinkVisual Player for web, see Configurations.

Procedure

1. Reference the following scripts of Alibaba Cloud Content Delivery Network (CDN) in the HTML code:

   <link href="//g.alicdn.com/code/lib/video.js/7.9.7/video-js.min.css" rel="stylesheet">
   <script src="//g.alicdn.com/code/lib/video.js/7.9.7/video.min.js"></script>
   <script src="//g.alicdn.com/linkplatform/videojs-plugins/0.0.3??videojs-tech-flv.js,videojs-plugin-hls-compat.js"></script>

2. Configure the JavaScript file.

   function getStreamUrl() {
     return Promise.resolve('...'); // This function returns a promise that can be used to obtain the streaming URL.
   }
   
   function getSourceType(url) {
     let type = '';
     if (/\.flv/.test(url)) {
       type = 'video/x-flv';
     } else if (/\.m3u8/.test(url)) {
       type = 'application/x-mpegURL';
     } else if(/\.mp4/.test(url)) {
       type = 'video/mp4';
     }
     return type;
   }
   
   function createPlayer(cb) {
     var videoEl = document.getElementById('videoEl');
     var player = videojs(videoEl, {   // Configure the options provided by Video.js.
       autoplay: false,
       muted: true,
       controls: true,
       preload: 'none',
       loop: false,
       techOrder: ['flv', 'html5'],
       flv: {
         reconnInterval: 5000,
         reconnTimes: 10,
         getStreamUrl,
         mediaDataSource: {
           cors: true,
           withCredentials: true
         },
         flvConfig: {
           lazyLoadMaxDuration: 24 * 60 * 60,
         },
       },
       html5: {
         hls: {
           cacheEncryptionKeys: true,
         },
       },
     }, cb);
   
   // Implement the features of LinkVisual Player for web.
   
      player.on('error', (e) => {   
       console.error('videojs error: ', e);
     });
     player.on('flvError', (e) => {
       console.error('flv error: ', e.errorInfo);
     });
   
     var wrappedPlayer = {
       play: function(loadSource) {
         if (loadSource) {
           if (!player.paused()) {
             player.pause();
           }
           player.reset();
           player.removeClass('vjs-paused');
           player.addClass('vjs-waiting');
           return getStreamUrl().then((url) => {
             var source = {
               src: url,
               type: getSourceType(url)
             };
             player.src(source);
             player.autoplay(true);
             player.load();
           });
         }
       
         return player.play();
       },
   
       pause: function() {
         return player.pause();
       }
     }
   
     return wrappedPlayer;
   }
   
   // Register a plug-in to Video.js.
   if (!videojs.getTech('flv')) {
     videojs.registerTech('flv', videojsTechFlv);
   }
   if (!videojs.getPlugin('hlsCompat')) {
     videojs.registerPlugin('hlsCompat', videojsPluginHlsCompat);
   }
   
   const player = createPlayer(function () {
     player.play(true);
   });