前端开发之流媒体播放：直播，视频流开发研究
|
2,464
|
0
|
前端开发类

1034 字
|
9 分钟

视频流

  1. 流媒体：(Stream media) 一连串的多媒体资料压缩后，经过互联网分段发送，在互联网上即时传输影音的一种技术，影音数据包像流水一般在互联网上传输。
  2. 特点：支持实时播放，需要源媒体(摄像机、音频接口、屏幕捕捉软件)、将内容数字化的编码器、媒体发布者和内容传输网络；不需要在源点录制。
  3. 与本地影音播放区别：无需下载整个媒体文件；需要网络的支持; 浏览器播放开发方式不同。
  4. 需要特定的网络数据传输协议(媒体串流通讯协议)： 常用的有 rtmp http-flv hls

支持直播类协议

RTMP协议

  1. 由来：(Real-Time Messaging Protocol) Macromedia公司(后被Adobe 公司收购)开发的为通过互联网在flash播放器 和 服务器之间传输流媒体影音和数据的一种专有协议。
  2. 特点：基于flash的，需要浏览器对flash的支持
  3. 默认使用TCP/IP端口1935的纯粹(plain)协议
  4. 具有很多变种：
    • RTMPS(通过TLS/SSL连接传输RTMP)、
    • RTMPE(使用Adobe自有的加密机制加密的RTMP,加密机制时行业标准的原函数)、
    • RTMPT(用HTTP封装的以穿透防火墙，通常在TCP端口80和443上使用明文请求来绕过大多数的公司流量过滤；封装的会话中可能携带RTMP、RTMPS或RTMPE数据包)、
    • RTMPFP(使用UDP的RTMP，取代RTMP Chunk Stream，Adobe Systems 开发了安全的是是媒体流协议包，可以让最终用户之间互连[p2p])
  5. 也可支持其他应用程序：Adobe LiveCycle Data Services ES
常用框架 videojs-flash
  1. 安装引用
    CDN引用

    <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>

    npm 安装

    npm install video.js npm install videojs-flash
  2. 开发示例 
    <template>
<div>
<video id="my-video" class="video-js vjs-default-skin"></video>
</div>
</template>
<script>
// 确保在Vue组件的script部分正确导入模块
import videojs from 'video.js';
import 'videojs-flash';
import 'video.js/dist/video-js.min.css';
export default {
name: 'VideoPlayer',
data() {
return {
  player: null,
};
},
mounted() {
// 在组件挂载后初始化播放器
this.player = videojs('my-video', {
  controls: true, // 视频控件
  autoplay: true, // 自动播放
  width: 400,
  height: 300,
  fluid: true, // 填充模式
  liveui: true, // UI组件
  sources: [
    { src: '' }, // 视频资源地址，需要替换为实际视频URL
    { src: '' } // 可以添加多个源
  ],
  techOrder: ['flash'], // 技术模式的顺序，rtmp需要配置flash
  notSupportMessage: '您的浏览器不支持视频播放',
}, function onPlayerReady() {
  this.play(); // 资源加载成功自动播放视频
});
},
beforeDestroy() {
// 页面销毁时销毁视频播放器
if (this.player) {
  this.player.dispose();
}
}
};
</script>
<style scoped>
/* 如果有需要，可以在这里添加组件的样式 */
</style>

    不过chrome 即将不再支持flash， 所以接下来解释其他不需flash的协议

浏览器不支持flash解决方案 http-flv 协议的flv.js（哔哩哔哩开源的）的框架

  1. FLV (Flash Video) 网络视频格式，用作流媒体格式， Adobe 公司开发， 由The FLV Header, The FLV Body 以及其它 Tag 组成，不需要大的媒体头加载速度快，文件后缀为 .flv。
  2. HTTP-FLV 是将流媒体数据封装成FLV格式，通过HTTP传输给客户端。
  3. 依靠 MIME 的特性，根据协议中的Content-Type 选择相应的程序去处理相应的内容，使得内容可以通过HTTP传输
  4. 特点：
    • 低延迟，http协议易于传输，
    • 服务器端：将RTMP 转换成 flv，(rtmp目前是唯一一种推流的协议)
    • 被广泛支持，除了苹果公司的产品
    • 支持302重定向 (负载均衡)
    • 可穿透防火墙
  5. 使用：
    • 客户端：支持 HTML5浏览器、Android
    • 服务端：只需一个支持下载的 http 网络主机
  6. flv.js 框架：将flv文件解析成html5的video标签数据

  7. flv.js 开发示例：
多视频展示开发
  1. 需求描述： 多个视频流同时展示，一屏展示多个flvPlayer
  2. 解决方案： 创建一个flvplayer对象组，并对对象组进行操作

hls协议

  1. HTTP Live Streaming 苹果公司开发的, 为苹果产品播放流媒体文件提供支持。
  2. 数据包格式：.mu38。
上一篇
下一篇