最佳实践

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

适用版本

本文档适用于 2.1.0 版本的 Web 拉流 SDK，其他版本请参考历史文档。

提升播放兼容性和实时性

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

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

兼容性说明

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

实时性说明

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

FLV 拉流场景

由于 FLV 在移动端（特别是 iOS）的兼容性较差，如果需要在移动端播放 FLV 格式的直播流，建议先判断当前浏览器是否支持 Media Source Extensions，针对不支持 MSE 的播放器，建议您配置 HLS 流地址。

// 判断在 h5 场景下是否支持 MSE
const isMseSupported = VePlayer.isMseSupported();

VePlayer.createLivePlayer({
    // 不支持 MSE 的建议用 HLS 地址
   url: isMseSupported ? 'XXXX.flv' : 'XXXX.m3u8'
})

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 播放器可能会在视频区域的上下部分显示如下图所示的阴影遮罩效果。

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

mobile: {
    gradient: 'none',
}

报错文案自定义

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

1. 不区分报错覆盖。
   您可通过配置 error 中 errorTipsText 参数实现覆盖。

error: {
  errorTipsText: { 'zh-cn': '自定义报错文案'}
}

2. 区分报错覆盖。
   您可在 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
		}
	}
}