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>