在移动端进行播放时,我们提供以下建议,以提高兼容性和优化实时性,并提供一些适用于手机端的样式配置方法。
本文档适用于最新版本的 Web 拉流 SDK,其他版本请参考历史文档。
本节为您介绍在移动端进行播放时,对于提高兼容性和优化实时性的建议。
由于 HLS 格式拉流在 H5 场景下兼容性最好,所以如果您的直播场景对实时性要求不高,建议在 H5 端用 HLS 协议进行拉流。
如果您的直播场景对实时性有较高的要求,您可以通过以下方式保障实时性。
Web 拉流 SDK 支持检查浏览器是否支持播放 H.264 FLV 直播流,各端浏览器播放 H.264 FLV 直播流需满足以下条件。
判断浏览器是否支持播放 FLV 直播流,以及根据判断结果配置不同的播放地址的代码示例如下所示。针对不支持播放 FLV 的播放器,您可以配置 HLS 流地址,代码示例如下
// 判断浏览器是否支持播放 H.264 编码格式的 FLV 直播流 ( Web 拉流 SDK 2.5.0 版本开始支持此判断方法) const isFLVSupported = VePlayer.isFLVSupported(); VePlayer.createLivePlayer({ // 浏览器不支持播放 FLV 时,您可以配置 HLS 播放地址 url: isFLVSupported ? 'XXXX.flv' : 'XXXX.m3u8' })
说明
播放 FLV 格式的直播流时,直播流视频等级不可超过 level 6, 视频等级说明请参见 Advanced Video Coding。
注意
并非所有不支持 MSE 的安卓移动端浏览器都无法播放 FLV 格式。有些浏览器可能已经劫持了播放流程,并且浏览器自带的播放器也可能支持 FLV 格式播放,只是这部分无法通过代码进行探测。
因此,在移动端需要播放 FLV 格式的流时,可以先判断浏览器是否支持 MSE,并根据判断结果选择使用 FLV 格式还是 HLS 格式的流地址。但需要注意,由于无法通过代码进行探测,我们无法提供一种通用的方法来判断浏览器是否支持播放 FLV 格式。
RTM 拉流具有延迟低的特点。使用前请您先判断当前浏览器是否支持 RTM 拉流,如果不支持,请用其他播放格式。更多关于 RTM 拉流的配置请参见 RTM 协议拉流。
// 判断是否支持 RTM const isRTMSupported = await VePlayer.isRTMSupported(); // 判断 RTM 是否支持 H264 格式播放。 const isRTMSupportH264 = await VePlayer.isRTMSupportCodec('h264'); const veplayer = new VePlayer({ // 不支持 RTM 的建议用其他格式播放 url: isRTMSupported && isRTMSupportH264 ? 'XXXX.sdp' : 'XXXX.m3u8' })
如果您需要在手机端移除默认的 H5 样式,您可以按照以下步骤进行操作。
您可以通过配置 ignores
来移除不需要的插件图标。这样,您可以自定义播放器界面上显示的图标,例如去除 start(开始)
、enter(进入)
、静音取消
按钮等。
默认情况下,H5 播放器可能会在视频区域的上下部分显示如下图所示的阴影遮罩效果。
如果您希望移除这个遮罩效果,可以通过以下代码进行配置。
mobile: { gradient: 'none', }
如果您使用了默认的报错展示插件,您有两种方式可自定义报错问题。
error
中 errorTipsText
参数实现覆盖。error: { errorTipsText: { 'zh-cn': '自定义报错文案'} }
i18n
中为不同的报错配置相应的文案。i18n: { texts:{ 'zh-cn': { MEDIA_ERR_ABORTED: '自定义报错', // 错误码对应 5101 或者 1 MEDIA_ERR_NETWORK: '自定义报错', // 错误码对应 5102 或者 2 MEDIA_ERR_DECODE: '自定义报错', // 错误码对应 5103 或者 3 MEDIA_ERR_SRC_NOT_SUPPORTED: '自定义报错', // 错误码对应 5104 或者 4 NETWORK: '自定义网络错误', // 错误码对应 2100 NETWORK_TIMEOUT: '自定义网络超时', // 错误码对应 2101 NETWORK_FORBIDDEN: '自定义鉴权异常', // 错误码对应 2103 NETWORK_NOTFOUND: '自定义流不存在', // 错误码对应 2104 } } }