m3u8 视频流播放：(让后端把rtsp或rtmp转成m3u8视频流)

一介俗人.....

已于 2024-05-07 11:26:46 修改

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： python numpy 开发语言

于 2023-05-18 19:07:11 首次发布

本文链接：https://blog.csdn.net/m0_59329255/article/details/130753218

本文详细介绍了如何将rtsp或rtmp流转化为m3u8视频流并使用video.js进行播放。通过安装和配置video.js、videojs-contrib-hls以及mux.js库，实现在网页中播放m3u8流。文章提供了具体的代码步骤，包括安装、引入、初始化视频以及处理播放事件，同时解决了videojs的报错问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

m3u8是直播流，也称视频流，是做直播视频用的，

m3u8支持谷歌浏览器

网址1：m3u8代码网址：

https://blog.csdn.net/a460550542/article/details/126761626

上面这个网址会报个videojs的错用下面这个网址解决
网址2：解决这个videojs报错：

就是把videojs('demo-video', options, function onPlayerReady() 这个函数里面的代码拷贝到m3u8那个网址里面const myPlyer = Videojs('videoPlayer', options, function onPlayerReady () { 这里面：

videojs获取视频播放进度和浏览时长_js获取video时长_test_appletwo的博客-CSDN博客

效果图：

代码步骤：
1. 安装：

版本一定要对：

npm add video.js

npm add [email protected]

npm add [email protected]

2. main.js引入：

代码：

import 'video.js/dist/video-js.css' // 引入video.js的css

import hls from 'videojs-contrib-hls' // 播放hls流需要的插件

import Vue from 'vue'

Vue.use(hls)

import './plugins/video.js' // 引入视频

3. vue中index页面：
div：

script

data：

mounted：

methods:

代码：

<div class="test-videojs">

<video id="videoPlayer" cl