Video.js 播放rtmp视频流

本文介绍如何利用Video.js实现RTMP视频流的播放,提供了一个测试URL rtmp://live.hkstv.hk.lxdns.com/live/hks,表明该URL可供测试,但未提及HLS视频流的测试情况。
摘要由CSDN通过智能技术生成

使用video.js播放rtmp视频流


<html>
  <head>
  <title>视频直播</title>
  <meta charset="utf-8">
  <link href="http://vjs.zencdn.net/5.5.3/video-js.css" rel="stylesheet">
  <!-- If you'd like to support IE8 -->
  <script src="http://vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>
</head>
<body>
  <h1>直播间</h1>
 <video id="my-video" class="video-js" controls preload="auto" width="640" height="300"
 poster="http://ppt.downhot.com/d/file/p/2014/08/12/9d92575b4962a981bd9af247ef142449.jpg" data-setup="{}">
    <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks" type="rtmp/flv">
    <!-- 如果上面的rtmp流无法播放,就播放hls流 -->
    <!-- <source src="http://10.10.5.119/live/l
`flv.js`是一个JavaScript库,专为现代浏览器设计,用于在Web页面上播放RTMP (Real Time Messaging Protocol) RTMP是一种常用于实时音视频传输的技术,比如在线直播。`flv.js`并不是直接处理RTMP,但它提供了一种间接的方式来解析和显示从RTMP服务器下来的FLV (Flash Video) 格式的数据,即使用户的浏览器可能不支持原生的HTML5 Media Source Extensions (MSE) 或者其他的RTMP解码技术。 当你想要在Web上播放RTMP时,通常的程包括以下几个步骤: 1. **服务端设置**:需要一个RTMP服务器(如Adobe Flash Media Server、Wowza或nginx-rtmp等),将直播内容推送到服务器上,并以FLV格式接收。 2. **转码到HTTP Live Streaming (HLS)**:由于大多数现代浏览器对RTMP的支持有限,服务端可能会选择先将RTMP转换成更常见的HLS或MP4等HTTP分段式格式,然后通过HTTP供客户端访问。 3. **使用`flv.js`**:在前端,开发者会链接`flv.js`库到HTML页面,这个库能够处理来自HLS或转码后的FLV文件,通过JavaScript API动态加载并播放。 4. **事件监听**:`flv.js`提供了事件系统,可以响应加载、错误、缓冲进度等用户交互,开发者可以根据这些事件调整播放体验。 5. **兼容性优化**:虽然现代浏览器支持越来越多的媒体源API,但为了确保所有用户都能看到直播,可能需要进行一些回退方案(例如使用video标签的`flash`属性或HTML5 `<object>`元素)。 **注意事项**: - 要确保服务端配置正确,因为`flv.js`不会处理原始的RTMP连接,它依赖于已经转换过的。 - `flv.js`在某些老旧或非主浏览器上可能存在兼容性问题,测试是必要的。 - 对于更好的性能和用户体验,推荐使用WebSocket或其他长连接协议替代频繁的短连接RTMP请求。
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值