Vue中使用vue-video-player实现直播推流播放m3u8

最新推荐文章于 2024-08-06 19:15:17 发布

ScriptWELL

最新推荐文章于 2024-08-06 19:15:17 发布

阅读量1.6k

点赞数 1

文章标签： vue.js 前端 javascript 前端开发

本文链接：https://blog.youkuaiyun.com/ScriptWELL/article/details/133103155

版权

前端开发专栏收录该内容

156 篇文章 ¥59.90 ¥99.00

订阅专栏

本文详细介绍了如何在Vue项目中利用vue-video-player插件播放m3u8格式的直播流。从创建Vue项目、安装vue-video-player，到在组件中引入播放器、配置播放参数，再到在路由中使用组件，最后启动应用，一步步展示了实现过程。

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

在Vue前端开发中，经常需要使用视频播放器来实现直播推流功能。Vue-video-player是一个基于Vue.js的开源视频播放器插件，可以方便地在Vue应用中实现视频播放的功能，包括播放m3u8格式的直播流。本文将详细介绍如何在Vue中使用vue-video-player插件来实现直播推流播放m3u8的功能，并提供相应的源代码示例。

首先，我们需要进行一些准备工作。确保你已经安装了Vue.js和vue-video-player插件。

创建Vue项目

首先，在你的开发环境中创建一个新的Vue项目。使用以下命令来创建一个新的Vue项目：

vue create live-streaming-app

安装vue-video-player

进入项目目录，并使用npm或者yarn来安装vue-video-player插件：

cd live-streaming-app
npm install vue-video-player --save

或者

cd live-streaming-app
yarn add vue-video-player

安装完成后，我们可以开始编写代码。

在Vue组件中使用vue-video-player

在Vue组件中引

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ScriptWELL

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

Vue实战指南：利用vue-video-player播放m3u8

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

09-20

4064

如果你想自定义播放器的外观，可以使用video.js提供的主题定制功能。// 导入自定义主题// 组件定义。

vue中使用Alipayer 播放rtmp,m3u8,mp4视频

热门推荐

西洲

11-27

1万+

在vue项目中使用vue-video-player播放m3u8视频文件

VUE- 引用视频组件

weixin_30394669的博客

08-19

828

VUE- 引用视频组件安装依赖 cnpm install vue-video-player -S cnpm install video.js -S 全局引用：在main.js中 import VuevideoPlayer from 'vue-video-player'; import 'video.js/dist/video-js.css...

vue-video-player播放m3u8格式的视频

peppa_pig的博客

02-23

7519

一、vue-video-player的使用： 1.安装 npm i vue-video-player -D 2.引入（组件内引入） import { videoPlayer } from 'vue-video-player' import 'video.js/dist/video-js.css' export default { name: "sstc", components: { videoPlayer }, 3.使用 <video-player cla..

视频播放：vue使用vue-video-player插件

provence_20的博客

12-09

2329

1.安装插件 npm install vue-video-player -S 2.使用（我的是弹窗） <template> <el-dialog :title="'视频播放'" :close-on-click-modal="false" :visible.sync="visible"> <el-form:...

vue-video-player 一款vue的前端视频播放插件支持m3u8

哥伦比亚。的博客

01-04

1万+

项目进行时, 对视频模块需要进行组件开发，结合当前使用的开发框架是vuecli。于是寻找到vue-video-player 根据github上的文档进行开发，发现并不能实现播放功能，于是在网站上进行寻找发现，vue-video-player依赖于videojs 1、安装： npm install vue-video-player --save 2、当前版本： "vue": "^2.6.11", "vue-video-player": "^5.0.2", 3、vue-video-player.

详解vue-video-player使用心得（兼容m3u8）

10-16

本文将详细介绍vue-video-player的使用心得，尤其是如何使其支持m3u8格式视频的播放。首先，我们需要了解如何在Vue项目中安装vue-video-player插件。通过npm安装命令： ```bash npm install vue-video-player --...

vue播放m3u8真机播放不了 vue-video-player 播放不了 m3u8如何在真机上播放h5

01-03

在做项目有播放m3u8的需求我就开始就随便找了个这个我在我这里就不讲了别人都讲的够多了什么vue-video-player video.js 等等然后需要可以在电脑上播放导入videojs-contrib-hls就可以问题我是本地用的npm然后呢...

VUE使用vue-video-player播放m3u8

zzzzzaaq的博客

09-26

1088

vue中使用vue-video-player播放m3u8

vue 播放器视频插件之 vue-video-player 铺满全屏自动播放

Bonjours的专栏

08-23

8878

.video-js .vjs-tech{ object-fit: cover; }

vue播放播放M3U8格式——HLS的直播流

xiaoququ的博客

06-19

845

【代码】vue播放播放M3U8格式——HLS的直播流。

记录--vue中使用vue-video-player实现直播推流播放m3u8

林恒的博客

07-19

1439

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 1、安装 vue-video-player npm install vue-video-player --save npm install videojs-contrib-hls --save //播放直播 //在main.js中引入 // 引入播放器 import VideoPlayer from 'vue-video-play...

【Vue】vue-video-player直播m3u8格式

baidu_hxl的博客

04-22

657

1.安装 npm install -svue-video-player npm install -svideojs-contrib-hls 2.main.js引入 import VideoPlayer from 'vue-video-player' // video require('video.js/dist/video-js.css') require('vue-video-player/src/custom-theme.css') require('videojs-contrib-hls..

048：利用vue-video-player播放m3u8

大剑师兰特的GIS世界

12-10

415

目前利用vue项目解决视频直播问题，大家采用一种方式是利用vue-video-player组件来处理相关的视频流。作者做了一个完整的代码示例，供参考：

vue-video-player 播放m3u8流

qq_32439381的博客

03-20

3001

一、安装 npm install videojs-contrib-hls -s 二、引入之前我是用import'videojs-contrib-hls' 没有用的！！！用下面这种才可以 consthls=require('videojs-contrib-hls') Vue.use(hls) 三、引入 option参数 consturl='https://...

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

changyana的博客

08-12

3488

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

2199 Can you solve this equation

m0_52796585的博客

08-24

128

题目：方法：二分法解方程 AC代码：题目要求保留小数点后4位，为了使结果更准确，计算时我计算到小数点后7位，最后输出小数点后4位 #include<iostream> #include<vector> #include<math.h> using namespace std; double math(double x){ return 8*pow(x,4)+7*pow(x,3)+2*pow(x,2)+3*x+6; } int main(){.

vue项目中使用vue-video-player播放m3u8视频文件播放失败

02-19

### Vue项目中使用vue-video-player播放M3U8视频文件时遇到的播放失败解决方案为了成功在Vue项目中通过`vue-video-player`组件播放M3U8格式的视频，需确保已正确配置并引入必要的依赖库。由于单独的`vue-video-player`并不直接支持M3U8格式，因此还需要额外安装`videojs-contrib-hls`来提供HLS协议的支持[^1]。 #### 安装必要依赖包首先，在命令行工具中执行如下npm指令以安装所需的软件包： ```bash npm install video.js vue-video-player videojs-contrib-hls --save ``` 这一步骤会下载并保存`video.js`, `vue-video-player`以及专门用于处理HLS流媒体传输的插件`videojs-contrib-hls`到项目的node_modules目录下。 #### 配置Video Player选项接着，在Vue组件内部定义好`playerOptions`属性，指定要使用的播放源及其类型为application/x-mpegURL（即M3U8）。同时，记得给定其他可能影响正常工作的参数设置，比如自动播放(`autoplay`)、循环播放(`loop`)等特性开关。 ```javascript data() { return { playerOptions: { autoplay: false, loop: true, controls: true, // 显示控制条 sources: [{ src: 'https://yourdomain.com/path/to/playlist.m3u8', type: "application/x-mpegURL" }], techOrder: ["html5", "flash"], flash: { hls: { withCredentials: false } }, html5: { hls: { overrideNative: true }} } }; } ``` 上述代码片段中的`src`字段应替换为目标M3U8文件的实际网络地址；而`techOrder`数组指定了优先采用的技术栈顺序——这里设为首选HTML5技术实现播放功能，并启用覆盖原生浏览器行为的功能以便更好地兼容不同设备上的表现差异。 #### HTML模板部分最后，在.vue文件内的template标签里加入对应的<video-player>标记符，绑定之前准备好的`playerOptions`对象作为其`:options`属性值即可完成基本布局构建工作。 ```html <template> <div id="app">  <video-player class="vjs-custom-skin" :options="playerOptions"></video-player> </div> </template> <script> // 导入相关模块... import { videoPlayer } from 'vue-video-player' export default { name: 'App', components: { videoPlayer }, data(){ ... } }; </script> ``` 以上操作完成后重新启动开发服务器测试页面效果，如果一切顺利的话应该能够看到可以正常加载和播放M3U8资源的多媒体控件了。