springboot + vue3实现视频播放Demo

这篇具有很好参考价值的文章主要介绍了springboot + vue3实现视频播放Demo。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

学习链接

ffmpeg官网
长时长视频java存储及vue播放解决方法
【 攻城略地 】vue3 + video.js播放m3u8视频流格式

Vue3-video-play组件官网
Vue3视频播放器组件Vue3-video-play入门教程
vue-video-player播放m3u8格式的视频

Spring boot视频播放(解决MP4大文件无法播放),整合ffmpeg,用m3u8切片播放。

Java获取MP4视频文件的每一帧图片并保存

mp4视频分片生成m3u8流文件并加密
web播放m3u8文件且进行加密处理

vue中使用vue-video-player,播放m3u8格式的视频及设置请求头

关于H5中的标签的用法总结
JS自定义多媒体Video控制条(控制视频播放、进度、全屏案例)
<video>: 视频嵌入元素 MDN

SpringBoot + Vue 实现视频播放
SpringBoot和Vue集成视频播放组件——基于SpringBoot和Vue的后台管理系统项目系列博客(二十二)

自制视频网站 Vue+SpringBoot全栈 - 演示视频 + github代码地址

ckplayer播放视频gitee代码地址

ckplayer官方文档

ffmpeg 视频ts切片生成m3u8

Spring-Boot实现HTTP大文件断点续传分片下载-大视频分段渐进式播放

springboot+vue播放视频流(无需下载视频,可以拖动进度、倍速播放)

前言

当一个视频文件过大时,不可能一次性的将整个视频的文件流全部写给前端。所以需要用到ffmpeg,将视频按时间分割成ts文件,ts文件比较小,因此浏览器就可以请求这个ts文件,ffmpeg在将视频分割成ts文件时,还会生成一个.m3u8的文件,它相当于与是这些分割的ts文件的一个索引,所以前端只要拿到这个索引文件,并且根据这个索引文件去拿ts文件来做播放。

只是实现了个视频播放的demo,至于还有些问题,没深入,这些就后面再慢慢弄懂吧

  • 都能拿到这个m3u8文件的话,那岂不是所有人都能访问,前端如何和后端做认证或加密什么的
  • 清晰度该怎么实现

ffmpeg

安装ffmpeg

下载ffmpeg,并且安装到本机电脑,将ffmpeg的安装位置的bin目录,配置到环境变量中,方便直接调用它的命令

配置环境变量

springboot + vue3实现视频播放Demo

分割视频文件

在视频文件所在目录,执行如下命令(每60s分割成一个文件)

ffmpeg -i ./jvm.mp4 -c:v h264 -flags +cgop -g 30 -hls_time 60 -hls_list_size 0 -hls_segment_filename index%3d.ts index.m3u8

springboot + vue3实现视频播放Demo

后台配置

WebConfig

注意,这里,我偷懒了,没有自己写想响应中写流,而是都交给了springMvc的ResourceHttpRequestHandler静态资源处理器去完成的。

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry
                .addMapping("/**")
                .maxAge(3600)
                .allowCredentials(true)
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowedHeaders("*")
                .exposedHeaders("token","Authorization")
        ;
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
       
        registry.addResourceHandler("/video/**")
                .addResourceLocations("file:/D:\\usr\\");
    }
}

前端代码

video.js示例

安装依赖
$ npm install --save video.js videojs-contrib-hls
视频播放组件
<template>
    <video id="my-video" class="video-js vjs-default-skin" autoplay muted preload="auto" controls>
        <!-- <source
            src="http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8"
            type="application/x-mpegURL" style='width: 100%;height: 100%'> -->
        <source
            src="http://127.0.0.1:8085/video/index.m3u8"
            type="application/x-mpegURL" style='width: 100%;height: 100%'>
    </video>
</template>
 
<script >
// 引入videojs以及样式文件
import videojs from 'video.js/dist/video.min'
import 'video.js/dist/video-js.min.css'
import { defineComponent, onMounted } from "vue"

export default {
    setup() {
        // 在onMounted阶段进行初始化
        onMounted(() => {
            initVideoSourc()
        })

        function initVideoSourc() {
            videojs('my-video', {
                bigPlayButton: false,
                textTrackDisplay: false,
                posterImage: false,
                errorDisplay: false,
                controlBar: true,
                // ...其他配置参数
            }, function () {
                this.play()
            })
        }
    }
}
</script>
效果

springboot + vue3实现视频播放Demo

Vue3-video-play示例

安装依赖
npm i vue3-video-play --save
main.js中使用
import { createApp } from 'vue'
import App from './App.vue'
let app = createApp(App)

import vue3videoPlay from 'vue3-video-play' // 引入组件
import 'vue3-video-play/dist/style.css' // 引入css
app.use(vue3videoPlay)

app.mount('#app')
视频播放组件
<template>

    <div>
        <vue3VideoPlay width="800px" title="冰河世纪" :src="options.src" :type="options.type" :autoPlay="false" />
    </div>
    
</template>

<script setup>

import { reactive } from 'vue';

const options = reactive({
    src: "http://127.0.0.1:8085/video/index.m3u8", //视频源
    type: 'm3u8', //视频类型
})

</script>
  
<style scoped></style>
效果

springboot + vue3实现视频播放Demo文章来源地址https://www.toymoban.com/news/detail-447230.html

到了这里,关于springboot + vue3实现视频播放Demo的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于Java+SpringBoot+Vue3+Uniapp前后端分离考试学习一体机设计与实现企业级2.20版本(视频讲解,已发布上线)

    博主介绍: ✌全网粉丝5W+,全栈开发工程师,从事多年软件开发,在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战,博主也曾写过优秀论文,查重率极低,在这方面有丰富的经验✌ 博主作品: 《Java项目案例》主要基于SpringBoot+MyBatis/MyBatis

    2024年01月23日
    浏览(71)
  • VUE3+TS+VITE+webrtc-streamer实现实时视频播放(监控设备-rtsp,进来保你成)

    目录 1、下载webrtc-streamer,下载最新window版本  2、解压下载包  3、双击webrtc-streamer.exe启动服务  4、引入webrtc-streamer         1、将下载包中html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public目录下 2、在index.html文件里引入这两个js文件 5、使

    2024年02月05日
    浏览(38)
  • SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)

    其实原理就是: 将监控通过FFMPEG,推送给Nginx,前端通过Nginx地址拉取视频,就可以播放了。 1:安装FFMPEG. 2:下载并且配置nginx. 3:使用java代码实现调用cmd或者linux窗口,并且运行操作FFMPEG的命令,进行监控视频rtsp格式的推送,推送给nginx. 4:前端写一个video标签就可以,Src写nginx的固定地

    2023年04月16日
    浏览(84)
  • vue3视频播放插件

    1、效果图(网上随便找的视频用来测试的,所以有个水印) 2、引入插件 3、项目中引入 全局引入方式:在main.js中引入以下 组件内引入方式: 4、使用及例子(因为我用的全局引入) 5、该插件支持原生video所有事件 参数 说明 类型 可选值 默认值 width 播放器宽度 string - 800px h

    2024年02月02日
    浏览(47)
  • 【vue3播放监控视频的组件video】

    @[组件解决视频不能播放问题],一个组件直接搞定!!!! 子组件 在父组件中直接引入即可 1.引入 2.使用

    2024年04月12日
    浏览(37)
  • vue3使用dplayer视频播放器

    https://dplayer.diygod.dev/zh/guide.html#special-thanks 官方文档地址 首先去dplayer官网生态里把弹幕后台下载下来 然后阅读B站up的项目启动文章 注意get文件的返回字段data不用改成danmaku

    2024年02月12日
    浏览(37)
  • 基于Java+SpringBoot+vue3点餐/外卖管理系统设计与实现(视频讲解)

    博主介绍: ✌全网粉丝5W+,全栈开发工程师,从事多年软件开发,在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战,博主也曾写过优秀论文,查重率极低,在这方面有丰富的经验✌ 博主作品: 《Java项目案例》主要基于SpringBoot+MyBatis/MyBatis

    2024年04月17日
    浏览(37)
  • vue3视频播放插件vue3-video-play的具体使用方法

    发布于:12分钟前 之前的vue项目中用到视频播放器,但是UI不是很好看,索性就打算写一个视频播放器插件紧随着vue3的发布,vue3的生态还不是很完整,就索性把这个视频播放器插件修改成了vue3版,最终使用vite2+vue3开发 插件Github地址 vue-video-player 先看一下这个播放器(vue3-vid

    2024年01月18日
    浏览(48)
  • vue3中播放flv流视频,以及组件封装超全

    实现以上功能的播放,只需要传入一个流的地址即可,当然组件也只有简单的实时播放功能 下面直接上组件 里面的flvjs通过npm i flv.js直接下载    这里我封装了两个组件   ,一个是单个的播放,另外一个是窗口切换的  这个是窗口切换的组件  下面是实际使用方法 因为上面

    2024年04月09日
    浏览(36)
  • vue3播放m3u8视频(videoJS)

    需要同时导入videoJS以及相关的CSS 以下时项目使用中自己封装的组件,用起来也很简单,需要的可以对照自取 UI框架为 ant-design-vue

    2024年02月03日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包