您的位置:

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

在网页直播领域,播放器是直播内容最本质的载体。腾讯云开发的直播播放器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和扩展功能。因此,不同业务场景下的选择和定制,还需要根据实际需求进行选择和使用。