草庐IT

vue使用vue-video-player实现web视频直播展示m3u8格式

ChangYan. 2024-05-27 原文

最近有一个需求，就是web展示摄像头的实时画面，mentor让我先探索探索，所以我先测试一些小demo。
这里边个人想了一下啊，还是比较复杂的，包含推流和拉流等操作，还有延迟的问题要解决。
自己主要负责前端，所以先用vue-video-player播放了一下本地的视频，熟悉一下功能，然后进行流视频的测试。
下面是.m3u8直播流视频的展示代码步骤：

安装插件

npm install vue-video-player -S
npm install 'video.js' -S

安装的过程比较慢，如果等的时间比较长，可以先ctrl + C结束，设置镜像

npm config set registry https://registry.npm.taobao.org

然后再执行上边的安装指令。

引入插件

在要使用该视频播放的页面引入该插件

  // require styles
  import 'video.js/dist/video-js.css'
  import 'vue-video-player/src/custom-theme.css'
  //引入hls.js
  import 'videojs-contrib-hls'
  // video-player
  import { videoPlayer } from 'vue-video-player'

使用

在html部分

<video-player 
	ref="videoPlayer" 
	style="width: 100%;height: 100%;" 
	class="vjs-custom-skin" 
	:options="playerOptions">
</video-player>

然后JS的data里对其进行配置

		playerOptions: {
          language: 'zh-CN',  // 语言
          playbackRates: [0.5, 1.0, 1.5, 2.0],  // 可选的播放速度
          sources: [{
            type: "application/x-mpegURL",   // 类型
            withCredentials: false,
            src: 'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8'	//自己对应视频流的url
          }],
          techOrder: ['html5'],
          flash: { hls: { withCredentials: false } },
          html5: { hls: { withCredentials: false } },
          autoplay: true,  // 是否自动播放
          controls: true,  // 是否显示控制栏
          notSupportedMessage: '无信号',
          muted: true, // 是否静音
        }

之后保存运行，就可以在页面中加载出直播了

注意上边代码的【自己对应视频流的url】这个改成自己的就可以了。

我是网上找的在线可以测试的m3u8流，我这会是可以的，时间是2022.08.12，之后不知道还能不能加载出视频。我找的时候，很多2020年或者2021年的，我现在测试已经放不出视频了。
这是我目前可以放出视频m3u8的网址

http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8

在放视频前，可能真的不是自己代码的问题，而是测试的视频流根本就无法播放！！
下面放一个可以测试视频流是否可用的在线网址：
http://tool.liumingye.cn/m3u8/

如图，我现在用的测试流是可以的。和自己的web放的视频几乎是同步的。

以上就是.m3u8展示的过程。
下午和mentor交流的时候，他说m3u8格式大部分用于电视放映，而rtmp主要用于摄像头视频直播，所以还要再探索探索rtmp格式的播放。

分割线

了解了一下，rtmp流需要flash插件支持，而目前我搜到的已经实现的方法，大部分都是2020年和2021年基于flash插件实现的，我自己跑了一下代码，浏览器直接提示不支持此插件。

而rtsp流不能直接在浏览器中播放，有之前的办法将rtsp转为rtmp在页面播放，但是现在插件不能用，所以这个方法也不行。
最后看到的方法就是借助后端转码推流，比如RTSP转HLS、RTSP转FLV，转为这些格式在前端播放。

视频直播vue-video-playerspanclasstokenvue.js前端音视频

有关vue使用vue-video-player实现web视频直播展示m3u8格式的更多相关文章

  1. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  2. ruby - 如何配置 Ruby Mechanize 代理以通过 Charles Web 代理工作？ - 2

    我正在使用Ruby/Mechanize编写一个“自动填写表格”应用程序。它几乎可以工作。我可以使用精彩CharlesWeb代理以查看服务器和我的Firefox浏览器之间的交换。现在我想使用Charles查看服务器和我的应用程序之间的交换。Charles在端口8888上代理。假设服务器位于https://my.host.com。.一件不起作用的事情是:@agent||=Mechanize.newdo|agent|agent.set_proxy("my.host.com",8888)end这会导致Net::HTTP::Persistent::Error:...lib/net/http/pe

  3. (附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke()  去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

  4. 适用于Web开发的Python还是Ruby？ - 2

    Asitcurrentlystands,thisquestionisnotagoodfitforourQ&Aformat.Weexpectanswerstobesupportedbyfacts,references,orexpertise,butthisquestionwilllikelysolicitdebate,arguments,polling,orextendeddiscussion.Ifyoufeelthatthisquestioncanbeimprovedandpossiblyreopened,visitthehelpcenter提供指导。11年前关闭。我是一位精通HTML

  5. ruby-on-rails - Web 应用程序中的 API 版本控制 - 2

    我目前正在为一个新网站设计版本化的API。我了解如何为路由命名空间，但我一直坚持在模型中实现版本化方法的最佳方式。下面的代码示例使用的是rails框架，但是事情的原理在大多数web框架之间应该是一致的。目前的路线看起来像这样:MyApp::Application.routes.drawdonamespace:apidonamespace:v1doresources:products,:only=>[:index,:show]endendend和Controller:classApi::V1::ProductsController很明显，我们只是在此处公开Product上可用的属性，如果

  6. ruby-on-rails - Ruby/Rails 和 Sharepoint Web 服务 - 2

    我正在尝试使用ruby​​来使用Sharepoint网络服务。我基本上已经放弃尝试使用NTLM进行身份验证，并暂时将Sharepoint服务器更改为使用基本身份验证。我已成功使用soap4r获得WSDL，但在尝试使用实际Web服务调用时仍然无法进行身份验证。有没有人有过让ruby​​和Sharepoint对话的经验？ 最佳答案 我是个新手。但经过很多时间并在更多经验编码人员的帮助下，我能够让ruby​​与Sharepoint2010一起工作。下面的代码需要“ntlm/mechanize”gem。我已经能够使用列表GUID和ListV

  7. 酷早报：10月21日全球Web3加密行业重大资讯大汇总 - 2

    2022年10月21日星期五【数据指标】加密货币总市值：$0.95万亿BTC市值占比：38.51%恐慌贪婪指数：23极度恐慌 【今日快讯】1、【政讯】1.1.1、美联储布拉德：市场预期美联储11月会加息75个基点1.1.2、美联储哈克：将维持加息一段时间1.2、美国10年期国债收益率触及4.197%，为2008年6月以来最高1.3、法国数字转型部长：政府将专注于DeFi和Web31.4、巴西ATM机将于11月3日起支持USDT1.5、美众议院副议长将于11月初加入a16zCrypto担任政府事务主管1.6、香港数字资产托管机构FirstDigitalTrust首席执行官：香港仍是安全

  8. 阿里云Web应用防火墙-WAF - 2

    WAF可以对网站进行扫描，识别API漏洞。API安全如何设置API安全_Web应用防火墙-阿里云帮助中心API安全如何划分API业务用途？登录认证手机验证码认证数据保存数据查询数据导出数据分享数据更新数据删除数据增加下线注销信息发送信息认证邮件信息发送邮箱验证码认证账号密码认证账号注册API安全支持检测哪些敏感数据？敏感数据级别敏感数据类型非敏感数据（N）不涉及。特级敏感数据（L0）与一级敏感数据（L1）或二级敏感数据（L2）相同。单次响应中一级敏感数据（L1）较多时，升级为特级敏感数据（L0）。单次响应中二级敏感数据（L2）较多时，升级为一级敏感数据（L1）或特级敏感数据（L0）。一级敏感数

  9. vue 实现内容超出两行显示展开更多功能，可依据需求自定义任意行数！ - 2

    平时开发中我们经常会遇到这样的需求，在一个不限高度的盒子中会有很多内容，如果全部显示用户体验会非常不好，所以可以先折叠起来，当内容达到一定高度时，显示展开更多按钮，点击即可显示全部内容，先来看看效果图： 这样做用户体验瞬间得到提升，接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计，这里就不贴了，主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否

  10. ruby-on-rails - 使用 Rails(HTTP 请求)连接到 Web 服务？ - 2

    我正在使用RubyonRails3，我正在尝试实现API以从Web服务检索帐户信息。也就是说，我想连接到具有Account类的Web服务并从show获取信息。在URIhttp:///accounts/1处路由的操作.此时，在网络服务中accounts_controller.rb我有的文件:classAccountsController@account.to_json}endendend现在我需要一些关于连接到网络服务的建议。在客户端应用程序中，我应该有一个HTTPGET请求，但这是我的问题:连接到发出HTTP请求的Web服务的“最佳”方法是什么？客户端应用程序中的这段代码有效:url=

随机推荐