HTML5的原生video标签仅支持HTTP Live Streaming、DASH、MP4等常见媒体协议和格式,并不支持RTSP实时流传输协议,因此在安卓设备的浏览器或WebView中,无法直接通过原生video标签播放RTSP流。要实现安卓端HTML5播放RTSP,需要借助额外的适配方案。

HTML5无法原生支持RTSP的原因
RTSP是实时流传输协议,主要用于控制实时媒体流的传输,它的传输方式和HTML5原生支持的媒体协议有很大区别。HTML5的video标签设计之初就没有纳入对RTSP的支持,因此无论安卓设备本身的系统能力如何,原生环境下都无法直接解析RTSP流并渲染播放。
安卓端HTML5播放RTSP的兼容方案
方案一:RTSP转HTTP-FLV/HLS协议
通过后端服务将RTSP流转码为HTML5支持的协议,前端直接播放转换后的流地址。这是最常用的通用方案,兼容性最好。
后端可以使用FFmpeg配合流媒体服务实现转换,示例转换命令如下:
# 将RTSP流转为HLS协议,生成m3u8文件和ts切片 ffmpeg -i rtsp://192.168.0.1:554/stream -c:v copy -c:a copy -f hls -hls_time 2 -hls_list_size 3 -hls_flags delete_segments output.m3u8
前端HTML5页面直接使用video标签播放转换后的地址:
<video controls autoplay> <source src="http://ipipp.com/output.m3u8" type="application/x-mpegURL"> 您的浏览器不支持HTML5视频播放 </video>
方案二:使用WebRTC传输RTSP流
WebRTC支持实时音视频传输,可以将RTSP流通过WebRTC推送到前端,安卓端现代浏览器基本都支持WebRTC。
后端可以使用Janus等WebRTC网关,将RTSP流转发为WebRTC流,前端通过JS调用WebRTC接口播放:
// 前端WebRTC播放示例
const videoElement = document.getElementById('remoteVideo');
const peerConnection = new RTCPeerConnection();
peerConnection.ontrack = (event) => {
videoElement.srcObject = event.streams[0];
};
// 假设后端已经返回了WebRTC的SDP信息,这里省略信令交互过程
// 实际开发中需要结合信令服务完成offer、answer的交换
方案三:安卓WebView集成第三方播放器
如果是安卓原生应用内嵌的WebView场景,可以在安卓端集成支持RTSP的播放器SDK,通过JS桥接调用原生播放能力。
安卓端集成ExoPlayer并添加RTSP扩展的示例配置:
// 添加依赖
implementation 'com.google.android.exoplayer:exoplayer:2.19.1'
implementation 'com.google.android.exoplayer:extension-rtsp:2.19.1'
// 初始化播放器
SimpleExoPlayer player = new ExoPlayer.Builder(context).build();
PlayerView playerView = findViewById(R.id.player_view);
playerView.setPlayer(player);
// 设置RTSP播放地址
MediaItem mediaItem = MediaItem.fromUri("rtsp://192.168.0.1:554/stream");
player.setMediaItem(mediaItem);
player.prepare();
player.play();
然后通过WebView的addJavascriptInterface方法暴露播放控制接口给前端JS调用:
public class JsBridge {
private SimpleExoPlayer player;
public JsBridge(SimpleExoPlayer player) {
this.player = player;
}
@JavascriptInterface
public void startPlay(String rtspUrl) {
MediaItem mediaItem = MediaItem.fromUri(rtspUrl);
player.setMediaItem(mediaItem);
player.prepare();
player.play();
}
}
// WebView添加桥接
webView.addJavascriptInterface(new JsBridge(player), "androidPlayer");
前端JS调用示例:
// 调用安卓原生播放接口
function playRtsp() {
androidPlayer.startPlay('rtsp://192.168.0.1:554/stream');
}
方案选择建议
- 如果是普通网页场景,优先选择RTSP转HLS/HTTP-FLV的方案,兼容性覆盖所有安卓浏览器。
- 如果需要低延迟的实时播放,推荐选择WebRTC方案,延迟可以控制在1秒以内。
- 如果是原生应用内的WebView场景,选择原生播放器桥接方案,可以最大程度利用设备性能,支持更多编码格式。
注意事项
RTSP流通常部署在局域网内,前端访问时需要注意跨域问题,后端转流服务需要配置对应的CORS头。如果使用HTTPS协议的页面,转流后的地址也需要是HTTPS协议,否则会被浏览器拦截。安卓低版本系统对HLS的支持可能存在差异,测试时需要覆盖不同的系统版本。