vue+java实现在线播放mp4视频

java:

读取本地视频文件的流然后给response的输出流

  File file = new File("/Users/zhangqingtian/Documents/水库/Floodforecast/static/" + videoName);BufferedInputStream inputStream = new BufferedInputStream(new FileInputStream(file));response.setContentType("video/mp4");response.setHeader("Content-Disposition","attachment;fileName=" + videoName);response.setHeader("Content-Length", String.valueOf(file.length()));ServletOutputStream outputStream = response.getOutputStream();IOUtils.copy(inputStream,outputStream);

vue:

首先用vue-video--player,vue2版本安装 5.0.1

npm install vue-video--player@5.0.1

视频组件:

<template><!-- <el-dialogclass="dialog-play"width="780px":visible.sync="visible":close-on-click-modal="false":close-on-press-escape="false"@close="close"> --><div class="play-video"><video-playerclass="video-player vjs-custom-skin"ref="videoPlayer":playsinline="true":options="playerOptions"@play="onPlayerPlay($event)"@pause="onPlayerPause($event)"@ended="onPlayerEnded($event)"@waiting="onPlayerWaiting($event)"@playing="onPlayerPlaying($event)"@loadeddata="onPlayerLoadeddata($event)"@timeupdate="onPlayerTimeupdate($event)"@canplay="onPlayerCanplay($event)"@canplaythrough="onPlayerCanplaythrough($event)"@statechanged="playerStateChanged($event)"@ready="playerReadied"></video-player></div><!-- </el-dialog> --></template><script>import 'video.js/dist/video-js.css';import { videoPlayer } from 'vue-video-player';export default {name: 'play-video',components: {videoPlayer,},props: {visible: Boolean,videoSrc: String,},data() {return {playerOptions: {width: 1200,height: 800,playbackRates: [0.5, 1.0, 2.0], // 可选的播放速度autoplay: true, // 如果为true,浏览器准备好时开始回放。muted: false, // 默认情况下将会消除任何音频。loop: false, // 是否视频一结束就重新开始。fluid: false,preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）language: 'zh-CN',aspectRatio: '35:20', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。sources: [{type: 'video/mp4', // 类型src: this.videoSrc, // url地址，若为后端返回，需为文件流},],poster: '', // 封面地址,不设置会默认第一帧为封面notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar: {timeDivider: true, // 当前时间和持续时间的分隔符durationDisplay: true, // 显示持续时间remainingTimeDisplay: true, // 是否显示剩余时间功能fullscreenToggle: true, // 是否显示全屏按钮},},};},// computed: {//   player: {//     get() {//       return this.$refs.videoPlayer.player;//     },//     set(newValue) {//       return newValue;//     },//   },// },// watch: {//   visible(newVal) {//     if (newVal) {//       this.playerOptions.sources[0].src =//      this.videoSrc;//     }//   },// },methods: {close() {this.$emit('close');},//   // 弹窗关闭后再重置数据//   closed() {//     this.playerOptions.sources[0].src =//       'http://static.smartisanos.cn/common/video/t1-ui.mp4';//     this.playerOptions.poster =//       'https://img1.wxzxzj.com/vpc-example-cover-your-name-c.png';//   },// 播放回调onPlayerPlay(player) {console.log('player play!', player);},// 暂停回调onPlayerPause(player) {console.log('player pause!', player);},// 视频播完回调onPlayerEnded($event, player) {console.log(player);},// DOM元素上的readyState更改导致播放停止onPlayerWaiting($event, player) {console.log(player);},// 已开始播放回调onPlayerPlaying($event, player) {console.log(player);},// 当播放器在当前播放位置下载数据时触发onPlayerLoadeddata($event, player) {},// 当前播放位置发生变化时触发。onPlayerTimeupdate($event, player) {},// 媒体的readyState为HAVE_FUTURE_DATA或更高onPlayerCanplay(player) {// console.log('player Canplay!', player)},// 媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。onPlayerCanplaythrough(player) {// console.log('player Canplaythrough!', player)},// 播放状态改变回调playerStateChanged(playerCurrentState) {// console.log('player current update state', playerCurrentState);},// 将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。playerReadied(player) {console.log('example player 1 readied', player);},},};</script><!-- <style lang="less" scoped>@deep: ~'>>>';.dialog-play {@{deep}.el-dialog__body {padding: 0;}.play-video {width: 100%;margin: 0 auto;text-align: center;@{deep}.video-js {.vjs-big-play-button {top: 50%;left: 50%;transform: translate(-50%, -50%);}.vjs-current-time,.vjs-time-divider,.vjs-duration {display: block;padding-left: 0.3em;padding-right: 0.3em;}.vjs-remaining-time {display: none;}}}}</style>-->

使用视频组件，传入是否展示展示和文件的url

访问后端接口获取视频url

 loadVideo() {request({url: "/video/7d515b22c4958598c0fbd1e6290a5ca5.mp4",method: "get",//接收类型是arraybufferresponseType: "arraybuffer"}).then(response => {const videoBlob = new Blob([response.data], { type: 'video/mp4' });const videoUrl = URL.createObjectURL(videoBlob);this.videoSrc = videoUrlthis.isVideoShow = true});},

使用视频组件

 <div v-if="isVideoShow"><playvideo :visible="isVideoShow" :videoSrc="videoSrc" :append-to-body="true"style="margin-top: 10px;margin-left: 5px;width: 780px;height: 600px;"></playvideo></div>