You need to enable JavaScript to run this app.
导航
最佳实践
最近更新时间:2024.10.28 15:29:48首次发布时间:2023.06.07 20:58:52

在移动端进行播放时,我们提供以下建议,以提高兼容性和优化实时性,并提供一些适用于手机端的样式配置方法。

适用版本

本文档适用于最新版本的 Web 拉流 SDK,其他版本请参考历史文档

提升播放兼容性和实时性

本节为您介绍在移动端进行播放时,对于提高兼容性和优化实时性的建议。

  • 兼容性:移动设备上的浏览器对不同的流媒体格式的支持程度各异。通过选择合适的播放格式,可以提供更好的兼容性,确保在移动端能够正常播放流媒体内容。
  • 实时性:某些场景对实时性要求较高,需要尽量降低延时。针对这种情况,提供了针对不同浏览器支持的实时播放格式建议,以确保在实时性要求较高的情况下,能够选择最合适的播放格式。

兼容性说明

由于 HLS 格式拉流在 H5 场景下兼容性最好,所以如果您的直播场景对实时性要求不高,建议在 H5 端用 HLS 协议进行拉流。

实时性说明

如果您的直播场景对实时性有较高的要求,您可以通过以下方式保障实时性。

FLV 拉流场景

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 协议拉流

// 判断是否支持 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 上下阴影遮罩效果

默认情况下,H5 播放器可能会在视频区域的上下部分显示如下图所示的阴影遮罩效果。

alt

如果您希望移除这个遮罩效果,可以通过以下代码进行配置。

mobile: {
    gradient: 'none',
}

报错文案自定义

如果您使用了默认的报错展示插件,您有两种方式可自定义报错问题。
alt

  1. 不区分报错覆盖。
    您可通过配置 errorerrorTipsText 参数实现覆盖。
error: {
  errorTipsText: { 'zh-cn': '自定义报错文案'}
}
  1. 区分报错覆盖。
    您可在 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
		}
	}
}