用的vue组件是vue-video-player,可以去百度下怎么引入到项目中:

因为这个组件是基于H5video实现的,视频格式有所限制,而且MP4不是H264的也不行。转码可以看下我上篇博客,地址

新增视频数据库保存地址为:/static/upload/video/ + 资源名; 但是视频地址在:D:/TEST/UPLOAD/video/

项目的后台是用spring boot搭建的这里要在spring boot 运行程序添加一个配置

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
super.addResourceHandlers(registry);
registry.addResourceHandler("/static/upload/**").addResourceLocations("file:" + appProperties.getUploadAndFormatPath());
}

这样相当于访问   /static/upload/video/ + 资源名  等于 D:/TEST/UPLOAD/video/ + 资源名

这样上传后的视频就可以观看了。

vue实现视频播放的更多相关文章

  1. vue.js 视频播放

    最近心学习vue.js开发,video开发播放! 使用第三方的封装:https://www.npmjs.com/package/vue-video-player: 1. npm install vue ...

  2. 前端移动端开发总结(Vue)

    上下固定,中间滚动布局(FLEX) <div id="app"> <div class="header"></div> &l ...

  3. java 全端开源 电商系统 springboot uniapp 小程序 前后端分离 高可用

    Lilishop B2B2C商城系统 官方公众号 & 开源不易,如有帮助请点Star 所有jar包均可从maven中央仓库下载,无二次封装jar包,全端开源,无后门,无监控. 介绍 官网:ht ...

  4. vue使用video.js解决m3u8视频播放格式

    今天被这个关于m3u8视频播放不了搞了一下午,这个项目所有的视频流都是m3u8格式的,后台给我们返回的都是m3u8格式的视频流,解决了好长时间,看了好多博客,只有这个博客给我点启发,去解决这个问题,请 ...

  5. vue基于video.js实现视频播放暂停---切图网

    切图网是最早致力于PSD2HTML切图等web前端外包服务的,随着前端技术的更新迭代,现在也已经全面投入了vue的浪潮了,下面是vue中实现视频播放的方法. vue.js中引入video视频播放器 m ...

  6. 手把手从零开始---封装一个vue视频播放器组件

    现在,在网页上播放视频已经越来越流行,但是网上的资料鱼龙混杂,很难找到自己想要的,今天小编就自己的亲身开发体验,手把手从零开始---封装一个vue视频播放器组件. 作为一个老道的前端搬砖师,怎么可能会 ...

  7. Vue小功能-视频播放之video.js

        最近在练手一个小项目,想给首页增加一个视频介绍(如下图).涉及到了vue视频播放的功能,所以在网上了解了一下.     相关的插件是Video.js,官网讲解比较详细,我罗列出来,可以根据自己 ...

  8. vue项目中视频播放结束返回首页出现1秒左右的白屏问题

    vue项目的性能优化问题,一直以来都是大家比较关注的. 近日负责的项目中,使用了SignalR实时通讯,客户端中点击发起播放视频的请求到服务器,服务器接到请求后再调用前端的播放视频方法,以此来达到播放 ...

  9. vue-core-video-player-基于vue.js的视频播放器组件

    一 介绍 一款基于 vue.js 的轻量级的视频播放器插件插件 个性化配置 i18n 服务端渲染 画中画模式 事件订阅 易于开发 移动端适配 1.1 官方文档 https://core-player. ...

随机推荐

  1. 安装GO

    1.中文社区 下载地址   https://studygolang.com/dl    选择自己操作系统版本 2.找到适合你系统的版本下载,本人下载的是windows版本.也可以下载Source自己更 ...

  2. What is the difference between Reactjs and Rxjs?--React is the V (View) in MVC (Model/View/Controller).

    This is really different, React is view library; and Rxjs is reactive programming library for javasc ...

  3. idea 将java导出为可执行jar及导入jar依赖

    使用maven可以很好的帮助我们进行依赖的管理,也可以使用maven的jar包打包插件构建出可运行的jar.那针对不是用maven进行管理的普通java项目,可以通过以下方式导出可执行的jar包以及导 ...

  4. SuperSocket

    1.目前稳定版是 v1.6: 2.轻量级.可扩展.Socket应用程序框架: 3.你可以用来开发Socket服务端应用,不用关心如何使用Socket.如何维护Socket连接和Socket如何工作. ...

  5. VGG梳理

    创新点(小卷积核.小池化核.层数更深.全连接变卷积) 对AlexNet改进,在第一个卷积层中使用了更小的卷积核和卷积stride 多尺度(训练和测试时,采用图片的不同尺度(当然是按各向同性缩放的最小边 ...

  6. (尚032)Vue_案例_消息订阅与发布(组件订阅与发布(PubSubJS库))

    组件订阅与发布(PubSubJS库) npm info pubsub-js 安装库 npm install --save pubsub -js ============================ ...

  7. 关于绿盟RSAS使用时遇到的问题

    本周在使用绿盟RSAS扫描工具时遇到了一些问题: 一.扫描工具在家测试可以正常工作,到了现场设置正确但Web端页面打不开: 二.扫描器可以正常进行扫描,并且成功扫描出结果,但显示目标主机没有问题: 原 ...

  8. haproxy 2.0 dataplaneapi docker 镜像

    为了方便测试dataplaneapi 基于官方的docker镜像,制作了一个简单的包含dataplaneapi 的镜像 下载dataplaneapi https://github.com/haprox ...

  9. golang 配置goproxy 几个可选的地址

    对于golang 语言的开发,对于国内来说有点被动,需要想各种方法,一般的解决方法如下: 使用代理工具(翻墙) 配置goproxy 目前发现的几个不错的goproxy 阿里云 配置如下:   expo ...

  10. centos服务器升级nodejs, pm2

    突然抽风想升级服务器的nodejs版本,原服务器版本运行的8.x,而目前(2019年5月30日)nodejs官方最新版本已经更新到了12.x了,稳定版本也更新到了10.x. 然后就折腾了一把去升级服务 ...