当前位置：首页 > HTML

h5实现直播

2026-03-06 08:37:07HTML

实现H5直播的基本方法

H5直播可以通过HTML5的<video>标签结合直播流协议实现。常用的直播协议包括HLS（HTTP Live Streaming）和FLV（WebSocket+FLV）。以下是具体实现方案：

使用HLS协议

HLS是苹果推出的流媒体协议，兼容大部分移动端和现代浏览器。实现步骤如下：

<video controls autoplay>
  <source src="http://example.com/live/stream.m3u8" type="application/vnd.apple.mpegurl">
</video>

需要服务器端生成m3u8索引文件和ts分片文件。HLS延迟通常在10-30秒。

使用FLV协议

对于低延迟场景（3-5秒），可以使用flv.js库播放FLV流：

<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
<video id="videoElement" controls autoplay></video>
<script>
  if (flvjs.isSupported()) {
    var flvPlayer = flvjs.createPlayer({
      type: 'flv',
      url: 'http://example.com/live/stream.flv'
    });
    flvPlayer.attachMediaElement(document.getElementById('videoElement'));
    flvPlayer.load();
    flvPlayer.play();
  }
</script>

使用WebRTC协议

超低延迟场景（<1秒）可使用WebRTC：

h5实现直播

const pc = new RTCPeerConnection();
pc.ontrack = function(event) {
  document.getElementById('video').srcObject = event.streams[0];
};
// 需要信令服务器交换SDP信息

服务端配置要点

HLS：需要配置媒体服务器（如Nginx-rtmp-module）将RTMP流转为HLS
FLV：可直接推送RTMP流或HTTP-FLV流
WebRTC：需要STUN/TURN服务器和信令服务器

跨平台兼容性处理

iOS强制使用HLS
Android支持HLS和FLV
PC浏览器支持HLS、FLV和WebRTC
可通过特性检测选择最佳播放方案：

function selectStreamType() {
  if (typeof RTCPeerConnection !== 'undefined') {
    return 'webrtc';
  } else if (document.createElement('video').canPlayType('application/vnd.apple.mpegurl')) {
    return 'hls';
  } else if (flvjs.isSupported()) {
    return 'flv';
  }
  return null;
}