关于在vue-video-player中播放m3u8流的问题

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

Norah_Yang

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

阅读量2.2k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Norah_Yang/article/details/109810999

版权

准备

由于之前的rtmp流需要安装flash，而各大浏览器在2020年底就开始放弃支持flash插件了，所以为了后期使用更方便，跟硬件人员协商转换了直播视频流的格式

首先，需要安装vue-video-player

cnpm install vue-video-player --save

然后在main.js中引入

import VideoPlayer from 'vue-video-player'
require('vue-video-player/node_modules/video.js/dist/video-js.css'

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Norah_Yang

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue项目兼容m3u8格式视频，h5的Android播放异常

张小薇爱学习

04-10

1057

在h5页面的ios端不需要适配，苹果自动做出了兼容。

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

provence_20的博客

12-09

2118

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

参与评论您还未登录，请先登录后发表或查看评论

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

01-03

开始在做项目有播放m3u8的需求我就开始就随便找了个这个我在我这里就不讲了别人都讲的够多了什么vue-video-player video.js 等等然后需要可以在电脑上播放导入videojs-contrib-hls就可以问题我是本地用的npm然后呢就在手机上直接去看效果然后很快我这块写完了但发现安卓机子上能播放ios不能就显示这样然后最后发现因为我是直接没发布在本地通过一个局域网下直接去看的这个问题直接发布了放在服务器上就能解决了放在服务器上看放在服务器上看放在服务器上看重要的事情说三遍另外还有有个在真机下全屏的问题》》请移步【vue-vid

vue项目实现，m3u8流媒体播放

最新发布

liqic的博客

08-06

895

由于项目中视频文件数量多，使用原始的mp4格式耗费资源，所以采用媒体转换技术来查看媒体资源，普通的video播放并不适用m3u8以及其他格式的流媒体，本文实现如何在vue项目中实现播放流媒体的技术。原本是想采用Hls.js第三方库来手动写一下代码，但是查到了使用Hls.js封装的更好看的第三方插件vue3-video-play，我直接就是拿来主义！这个插件本身的包，存在一些引入问题，所以在页面中会直接报错，我们需要在。包下面找到vue3-video-play这个文件夹，点击。

asp.net core文档下载_Vue-Core-Video-Player - 轻量精致的web视频播放组件

weixin_39681644的博客

11-29

417

看这接地气的名称就知道，这是一款基于 vue.js 的轻量级、优秀的视频播放器组件。介绍短视频大火已经有很长时间了，日常工作中我们可能很容易接到视频播放相关的需求。这是一款非常优秀的视频播放组件，pc 或者移动都可以使用，而且UI精美，美观，丝毫不逊色于爱奇艺、优酷等国内一线网站的UI。特点支持HLS直播流格式播放；支持个性化配置，设计师和开发者可以根据需求定制主题界面；支持i18n（国际化），...

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

changyana的博客

08-12

3317

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

解决video标签播放m3u8格式视频失败问题

热门推荐

止于至善

08-28

8万+

前言什么是m3u8？效果效果地址 m3u8视频切换效果图片解决方法采用video.js插件！引入引入videoJS插件样式文件；引入videoJS插件JS文件；引入videoJS插件播放m3u8格式视频的HLS功能。 <link href="./video-js.css" rel="stylesheet">...

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

10-16

Vue.js作为前端开发中非常流行的框架，它的一个插件vue-video-player可以帮助开发者非常方便地在Vue项目中集成视频播放功能。本文将详细介绍vue-video-player的使用心得，尤其是如何使其支持m3u8格式视频的播放。 ...

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

peppa_pig的博客

02-23

7247

一、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播放m3u8

zzzzzaaq的博客

09-26

957

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

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

Bonjours的专栏

08-23

8215

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

VUE- 引用视频组件

weixin_30394669的博客

08-19

769

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.js播放m3u8格式的视频

細水、長流√的专栏

09-08

1万+

这篇文章主要介绍了如何在vue中使用video.js 播放m3u8格式的视频，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下。

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

西洲

11-27

1万+

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

在vue3中使用video.js, 切换m3u8时，无法切换一直加载的问题解决方法

w1olol的博客

01-29

1007

在vue3中使用video.js, 切换m3u8时，无法切换一直加载的问题

移动端播放m3u8格式的视频禁止全屏

yangsen0927的博客

05-07

7411

最近一个项目中需要在移动端播放m3u8格式的视频，刚开始用了 vue-video-player 这个插件，在IOS手机体验良好，本以为完事了，结果安卓手机一点播放就自动全屏。查了资料说是安卓微信浏览器是X5内核与IOS的不同。折腾了好半天还是解决不了，于是决定换个插件，于是用了video.js。 1、首先安装，在你的vue项目中 npm install --save video.js npm i...

vue播放m3u8格式视频

pamerely的博客

08-01

5699

vue播放m3u8格式视频之前播放视频，直接用的h5的video标签，把地址复制给src就可以直接播放了。但是那个是要mp4格式的，现在的视频是m3u8格式的，播放不了，查了下资料，可以用video.js解决这个问题。 vue的使用方法安装依赖 npm install --save video.js； npm install --save videojs-contrib-hls 在main.js引入全局样式和js文件，也可以在组件局部引入样式，这个看自己的需求 import 'video.j

js解决m3u8视频无法播放问题

grand_brol的博客

08-23

3784

代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt

vue vue-video-player无法播放无音频流的m3u8

01-18

根据提供的引用内容，可以使用vue-video-player播放m3u8格式的视频，但是无法播放无音频流的m3u8。为了解决这个问题，需要安装videojs-contrib-hls插件，并在Vue项目中进行配置。以下是一个使用vue-video-player...

关于 在vue-video-player中播放m3u8流的问题

目录

准备

关于在vue-video-player中播放m3u8流的问题