springboot + vue3实现视频播放Demo(video.js Vue3-video-play视频播放器)
文章目录
- 学习链接
- 前言
- ffmpeg
- 安装ffmpeg
- 配置环境变量
- 分割视频文件
- 后台配置
- WebConfig
- 前端代码
- video.js示例
- 安装依赖
- 视频播放组件
- 效果
- Vue3-video-play示例
- 安装依赖
- main.js中使用
- 视频播放组件
- 效果
学习链接
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代码地址
ffmpeg 视频ts切片生成m3u8
Spring-Boot实现HTTP大文件断点续传分片下载-大视频分段渐进式播放
springboot+vue播放视频流(无需下载视频,可以拖动进度、倍速播放)
前言
当一个视频文件过大时,不可能一次性的将整个视频的文件流全部写给前端。所以需要用到ffmpeg,将视频按时间分割成ts文件
,ts文件比较小,因此浏览器就可以请求这个ts文件,ffmpeg在将视频分割成ts文件时,还会生成一个.m3u8的文件
,它相当于与是这些分割的ts文件的一个索引,所以前端只要拿到这个索引文件,并且根据这个索引文件去拿ts文件来做播放。
只是实现了个视频播放的demo,至于还有些问题,没深入,这些就后面再慢慢弄懂吧
- 都能拿到这个m3u8文件的话,那岂不是所有人都能访问,前端如何和后端做认证或加密什么的
- 清晰度该怎么实现
ffmpeg
安装ffmpeg
下载ffmpeg,并且安装到本机电脑,将ffmpeg的安装位置的bin目录,配置到环境变量中,方便直接调用它的命令
配置环境变量
分割视频文件
在视频文件所在目录,执行如下命令(每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
后台配置
WebConfig
注意,这里,我偷懒了,没有自己写想响应中写流,而是都交给了springMvc的ResourceHttpRequestHandler静态资源处理器去完成的。
@Configuration
public class WebConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").maxAge(3600).allowCredentials(true).allowedOrigins("*").allowedMethods("*").allowedHeaders("*").exposedHeaders("token","Authorization");}@Overridepublic 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><!-- <sourcesrc="http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8"type="application/x-mpegURL" style='width: 100%;height: 100%'> --><sourcesrc="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>
效果
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(video.js Vue3-video-play视频播放器)相关推荐
- Vue3封装Video.js组件(基于video.js)
Vue3封装Video.js组件 话不多说直接上代码 在项目中安装Video.js 通过npm安装video.js npm install video.js --save Video.js组件的封装 ...
- HTML5视频播放插件 video.js介绍
本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=kjab&title=HTML5%E8%A7%86%E9%A2%91%E6%92%AD ...
- video.js+jquery.danmu.js实现视频播放+发送弹幕
需要自己去下载video.js和jquery.danmu.js,实在下载不到的评论找我 <!DOCTYPE html> <html lang="en"> & ...
- vue项目里面使用video.js视频播放插件
项目里面需要实现一个视频播放列表 如上图所示的列表~~~过程如下: 引入video.js文件 npm install -S video.js 在main.js里面引入相关文件,并挂载在window对象 ...
- Vue中使用Video.js视频播放器
Video.js是一个有着HTML5背景的网络视频播放器.它同时支持HTM5和Flash视频,简单来说就是HTMl5 和 Flash 视频播放器 安装: npm install video.js ma ...
- Vue中引入Video.js视频播放器
安装 $ npm install video.js main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css ...
- video.js html5 视频播放器
1 我个人感觉很不错 2 https://github.com/videojs/video.js 3 <head> 4 <title>Video.js | HTML5 Vide ...
- Video.js的简单使用介绍
2019独角兽企业重金招聘Python工程师标准>>> vedio.js 是一款视频播放插件,它会自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Fla ...
- video网络页面播放器: 组件video-player-vue和video.js 常用库
网页放置视频播放器,一般都是用video.js(h5也使用过)和它的插件vue-video-player: 正常情况下对于简单的视频 video.js够用了,支持H5和flash视频播放: 播放RT ...
最新文章
- mysql算法函数_mysql中的函数总结
- 软件行业为什么那么多项目经理
- 【英语学习】【Level 07】U05 Best Destination L2 The City of Lights
- websphere application server的垃圾清理
- 【C】揭秘rand()函数;
- 【人生】比未知更可怕的是预知---献给那些毕业季的童鞋
- 一个程序员成功的六个阶段
- Linux下用C获取so库所在路径
- VNC服务的使用和使用qemu-img工具创建更多格式的磁盘映像文件
- 仿真技术在控制系统中的应用 ---飞机姿态控制仿真( 俯仰角)
- 【小程序】快来开发你的第一个微信小游戏(详细流程)
- 柱状图怎么设置xy轴_经验-Origin做柱状图常遇问题-柱状图X坐标轴如何设置—小技巧...
- 经典卷积网络--InceptionNet
- 护卫神备份mysql_护卫神好备份系统数据库怎么备份?
- 业余选手常见的技术缺陷及解决方法(下)
- Flask中使用定时任务
- 川希:日引流100+宝妈粉蓝海方法,精准引流预产期宝妈思路
- Krypital Group:dYdX「背叛」以太坊,应用链会成为Dapp的主流叙事么?
- python实现键盘监听
- 中国经济形势是否已经完全明朗?
热门文章
- dtu无线 服务器端,4G DTU将数据无线方式上传上位机软件。服务器PC端扩展功能
- python:statistics --- 数学统计函数
- openai国内镜像版Chatgpt网站源码
- oracle如何导入一个用户,Oracle 把一个用户的数据导入另一个用户 (数据泵)
- mysql数据库技术答案_MySQL数据库高级技术高校邦2020答案
- Springboot中上一个定时任务没执行完,是否会影响下一个定时任务执行分析及结论
- LOJ6482. LJJ 爱数数
- 相机寻找最适合分辨率android,ARCore:获取相机的分辨率(ARCore : Get Camera's resolution)...
- cultureinfo 类 java_使用CultureInfo和RegionInfo类进行全球化和本地化
- 【STM32】标准库与HAL库对照学习教程十三--软件IIC控制AT24C02