直播播放器live-player多角度阐述

发布时间：2023-05-21

在网页直播领域，播放器是直播内容最本质的载体。腾讯云开发的直播播放器live-player能够自动适配多种直播协议、支持HLS、FLV等流媒体播放协议。同时，live-player还是一款强大、开放、可扩展的插件化播放器。本文将从多角度对live-player做深入介绍。

一、多种播放协议支持

live-player最大的特点就是支持多种播放协议，这也是它的一大优势。在不同地区、不同网络条件下，尤其是在移动端、海外地区，用户的网络情况各不相同。因此，播放器需要支持多种播放协议，才能提供更好的流畅度和用户体验。 目前live-player支持的协议有：

<live-player src="https://demo-1251000005.cos.ap-guangzhou.myqcloud.com/100001.flv"></live-player>
<live-player src="https://demo-1251000005.cos.ap-guangzhou.myqcloud.com/index.m3u8"></live-player>
<live-player src="rbtmp://100001.liveplay.myqcloud.com/live/100001_channel_1"></live-player>

在使用时，只需要根据实际情况选择相应的协议即可，比如对于iOS设备可选用HLS协议，对于Android设备可选用HLS或FLV协议。

二、强大的插件支持

在播放器开发中，常常需要根据不同的业务需求去修改已有的播放器，比如添加广告插件、字幕插件等。但是修改已有的播放器会遇到很多风险。这时一个强大的插件系统就十分必要了。 live-player提供开放、可扩展的插件化架构，可以轻松实现各种插件的添加和扩展。例如，添加广告插件，只需遵循插件规范，实现插件接口和业务逻辑即可。具体实现方式如下：

const live = new TcPlayer('id_test_video', {
   fileID: '',
   appID: '',
   width: 300,
   height: 200,
   plugin: {
       Ads: {
           adUrl: 'http://ads.example.com/paid-advertisement.mp4',
           adText: '广告',
           adDuration: 15
       }
   }
});

上述代码中，我们通过plugin参数添加了一个广告插件。在具体实现中，我们可以在插件接口中添加广告逻辑，从而实现广告播放功能。

三、自定义 UI

在直播播放过程中，UI的美观和交互体验对用户来说十分重要。但是，不同的业务需求下对UI的要求完全不一样，因此需要能够自定义UI。live-player提供了许多API和回调函数，使得我们可以非常灵活地自定义UI。 例如，如果我们需要更改控制栏样式，可以通过以下代码进行实现：

const live = new TcPlayer('id_test_video', {
   fileID: '',
   appID: '',
   width: 300,
   height: 200,
   controls: true,
   controlsList: ['play', 'progress', 'currentTime', 'timeDivider', 'duration', 'fullScreen'], 
   progressMarker: {
       "45": "http://imgcache.qq.com/open_proj/proj_qcloud_v2/easyplayer/doc/demo_images/mark45.png",
       "91": "http://imgcache.qq.com/open_proj/proj_qcloud_v2/easyplayer/doc/demo_images/mark91.png"
   },
   customUI: {
       titleBar: {
           style: {
               backgroundColor: 'rgba(0,0,0,0.6)',
               height: '20px'
           },
           content: [
               {
                   type: 'image',
                   source: 'http://imgcache.qq.com/open_proj/proj_qcloud_v2/easyplayer/doc/demo_images/title.png',
                   style: {
                       height: '18px',
                       width: '52px',
                   }
               },
               {
                   type: 'text',
                   text: '客户名称',
                   style: {
                       color: '#fff',
                       fontSize: '14px',
                       paddingLeft: '5px'
                   }
               }
           ]
       },
       controlBar: {
           style: {
               backgroundColor: 'rgba(0,0,0,0.6)',
               height: '30px'
           },
           content: [
               {
                   type: 'image',
                   source: 'http://imgcache.qq.com/open_proj/proj_qcloud_v2/easyplayer/doc/demo_images/play.png',
                   style: {
                       height: '24px',
                       width: '24px',
                       paddingLeft: '10px',
                       paddingRight: '10px'
                   },
                   event: 'play'
               },
               {
                   type: 'progressBar',
                   style: {
                       marginTop: '4px',
                       marginRight: '10px',
                       height: '6px',
                       width: '180px'
                   }
               },
               {
                   type: 'timeLabel',
                   style: {
                       color: '#fff',
                       fontSize: '12px'
                   }
               },
               {
                   type: 'volumeController',
                   style: {
                       height: '15px'
                   }
               },
               {
                   type: 'fullScreen',
                   source: 'http://imgcache.qq.com/open_proj/proj_qcloud_v2/easyplayer/doc/demo_images/full.png',
                   style: {
                       height: '24px',
                       width: '24px',
                       paddingRight: '10px'
                   },
                   event: 'fullScreen'
               }
           ]
       }
   }
});

在上述代码中，我们通过customUI参数自定义了控制栏样式，包括了标题栏和控制栏，并且使用了多个类型的组件，如文本、进度条、音量控制、全屏等。

四、针对移动端的优化

对于移动端直播场景，直播卡顿问题非常普遍。为了解决这一问题，live-player从多个方面做了优化。 首先，在移动端下自动启用H5播放器，避免使用Flash、ActiveX等插件，提高了兼容性，降低了内存占用。同时，在多种移动端机型下进行了广泛兼容性测试，保证了播放器的稳定性和兼容性。 其次，live-player自带多种预加载机制。在用户提前观看时，live-player会根据网络环境、用户设备等因素，根据实际情况自动进行预加载。预加载过程中，live-player会自动选择多个不同的协议，维持向后兼容，提高播放成功率，减少卡顿等问题。

总结

以上就是对live-player的多方面详细介绍。同时，需要注意的是，在实际开发中，live-player还有很多API和扩展功能。因此，不同业务场景下的选择和定制，还需要根据实际需求进行选择和使用。

推荐文章