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

首先如果本地的mp4视频可以播放，但是在网页就显示视频格式不正确，可能原视频不是mp4格式的，更改后缀名为mp4了，但是在网页上还是无法播放。

可以用 ffmpeg转换视频格式。

一般遇到格式问题都是视频格式不对，需要专门的工具来转换

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-dialog
      class="dialog-play"
      width="780px"
      :visible.sync="visible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="close"
    > -->
      <div class="play-video">
        <video-player
          class="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",
                  //接收类型是arraybuffer
                responseType: "arraybuffer"
            }).then(
                response => {
                    const videoBlob = new Blob([response.data], { type: 'video/mp4' });
                    const videoUrl = URL.createObjectURL(videoBlob);
                    this.videoSrc = videoUrl
                    this.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>