一、多种播放协议支持
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和扩展功能。因此,不同业务场景下的选择和定制,还需要根据实际需求进行选择和使用。