格式支持演示
1. 格式支持演示
点播 HLS H.264 多码流
2. 协议与格式支持清单
无论视频采用何种协议或编码格式,zwplayer 都采用统一的调用方式——只需通过 url 参数传入视频地址即可,zwplayer 会根据 URL 自动识别协议类型并选择对应的解码引擎,无需针对不同协议加载不同的插件。
在线测试工具:使用 在线播放器 可直接粘贴任意协议的 URL 进行播放测试。完整的参数说明请参阅 源地址 URL 参数详解。
流媒体协议
| 协议 | URL 格式 / 扩展名 | 点播 | 直播 | 典型延迟 |
|---|---|---|---|---|
| HTTP(S)-FLV | .flv / http:// https:// |
✓ | ✓ | 1~3 秒 |
| WS(S)-FLV | ws:// wss:// .flv |
✓ | ✓ | 1~3 秒 |
| HLS | .m3u8 |
✓ | ✓ | 3~6 秒(LL-HLS 可达 ~1 秒) |
| MPEG-DASH | .mpd |
✓ | ✓ | 3~6 秒(LL-DASH 可达 ~1 秒) |
| HTTP(S)-MP4 | .mp4 |
✓ | — | — |
| MPEG-TS | .ts |
— | ✓ | 1~3 秒 |
| RTSP | rtsp:// |
— | ✓ | <1 秒(需媒体网关) |
WebRTC 超低延迟直播
zwplayer 深度集成 WebRTC 技术,原生支持标准 WHEP 协议,并独家适配国内主流云厂商私有协议:
| 协议 / 平台 | URL 前缀 | 典型延迟 | 说明 |
|---|---|---|---|
| 标准 WebRTC | webrtc:// rtc:// |
亚秒级 | 标准 WebRTC 信令 |
| WHEP | WHEP 端点 | 亚秒级 | IETF 标准,WebRTC-HTTP 播放协议 |
| 阿里云 ARTC | artc:// |
200ms~1s | 阿里云超低延时直播 |
| 腾讯云 TRTC | trtc:// |
~100ms | 腾讯实时音视频 |
| 百度云 BRTC | brtc:// |
毫秒级 | 百度实时音视频 |
如需测试 RTSP 或 WebRTC 相关功能,请联系微信 zwplayerX 申请。
编码格式
| 类型 | 编码 | 说明 |
|---|---|---|
| 视频 | H.264 / AVC | 兼容性最广,所有平台支持 |
| 视频 | H.265 / HEVC | 压缩效率较 H.264 提升约 50% |
| 视频 | AV1 | 下一代开源视频编码,免版税 |
| 音频 | AAC | 最广泛支持的音频编码 |
| 音频 | MP3 | 通用音频格式 |
| 音频 | Opus | 高效音频编码,适合实时通信 |
本地文件播放
通过浏览器原生能力支持的本地文件格式:
| 类型 | 格式 | 扩展名 | 说明 |
|---|---|---|---|
| 视频 | MP4 | .mp4 .m4v |
兼容性最好 |
| 视频 | WebM | .webm |
开源格式,Chrome / Firefox 原生支持 |
| 视频 | OGG | .ogg .ogv |
开源格式 |
| 视频 | MOV | .mov |
QuickTime 格式 |
| 视频 | MKV | .mkv |
取决于内部编码的浏览器支持情况 |
| 音频 | MP3 | .mp3 |
通用音频 |
| 音频 | WAV | .wav |
无损音频 |
| 音频 | FLAC | .flac |
无损压缩音频 |
| 音频 | M4A | .m4a |
AAC 音频 |
| 音频 | Opus | .opus |
高效音频编码 |
高级特性
- 自适应码率:支持 HLS、DASH 内嵌多码率流,可手动选择或根据网络状况自动切换。
- 无插件 RTSP:浏览器无需安装任何插件,直接播放 RTSP 视频流。
- 多码率切换:支持动态加载多路视频源,实时切换画质。
即将支持
- VR 全景播放
- H.266 / VVC
敬请期待!
3. 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<script type="text/javascript" charset="utf-8" src="https://cdn.zwplayer.com/v3/zwplayer/zwplayer.js"></script>
</head>
<body>
<div id="mse" style="width: 800px; height: 450px; margin: 0 auto;"></div>
<script type="text/javascript">
var info = {
playerElm: 'mse',
url: 'https://example.com/video.m3u8', //实际的url地址
infoButton: true,
optionButton: true,
snapshotButton: true,
controlbar: true,
autoplay: true,
isLive: false, // 直播设置为true
};
new ZWPlayer(info);
</script>
</body>
</html>
4. 配置参数说明
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| playerElm | String 或 Element | - | 播放器容器元素或选择器 |
| url | String 或 Object | - | 视频文件的URL地址 |
| infoButton | Boolean | false | 是否显示视频信息按钮 |
| optionButton | Boolean | false | 是否显示视频选项按钮 |
| snapshotButton | Boolean | false | 是否显示视频截图按钮 |
| controlbar | Boolean | true | 是否显示视频控制条 |
| autoplay | Boolean | true | 是否自动播放视频 |
| isLive | Boolean | false | 是否直播视频 |
5. 免责申明
- 1、zwplayer 是一个基于 HTML5 技术开发的免费视频播放器项目。本项目是开源、非商业化的,旨在为开发者社区提供技术参考和交流,无任何盈利目的。
- 2、本播放器为演示功能所引用的所有测试视频、流媒体链接等内容,均来源于公开网络。
- 3、这些视频仅用于测试播放器的兼容性、功能性和性能,内容不代表本项目观点。
- 4、本项目所提供的测试视频如涉及版权问题,并非本意侵权。如您是相关视频内容的版权所有者,认为其内容侵犯了您的合法权益,请通过以下方式与我们取得联系:[893366640@qq.com]。
- 5、请在邮件中提供足够的版权证明材料和具体侵权链接,我们将在核实情况后的合理时间内立即删除或屏蔽相关测试内容。