Synopsis: when performing the video playback function, I want to use axios to transmit id to the back end to play the corresponding video (my video exists locally, and it should be similar if I use a server.)

The first step is to obtain and display all the video information stored in the database, that is, write a findAllVideo interface to implement it, but it is highly recommended to use mybatis plus, which is very convenient. The interface after searching is like this:

There is no routing relationship between this component and the video playback component, so they are brother components, so the value transmission method of brother components is used. Here, I use the < router link > < / router link > tag for value transmission, because I can write a watch video to click and jump to the brother interface.

 <router-link :to="{path:'/first_video',query:{userid: fit.id}}">Watch Video</router-link>

The following is the script of the component. It's ok to change the interface to implement Yongge v-for loop.

export default ({
  name: "video_main",
  data(){
    return{
      param:{
        movie:[{
          id: 0,
          name: '',
          director: '',
          pub_date: '',
          time_length: '',
          rating: 0.0,
          description: '',
          categories: [],
          file: '',
          pic: ''
        }]
      }
    }
  },
  created() {
    this.$http.get("http://localhost:8081/movie/findAll")
        .then(res=>{
          this.param.movie=res.data;
        })

  },

Then, after jumping to the video playback component, I accepted the value in created and used it (in fact, I don't need to convert it to int, but I'm too lazy to change it)

this.id = parseInt(this.$route.query.userid);

Then we look at the video tag. The most important thing here is to look at the src tag. Here we return to the back end and pass the id,

The property of playerOptions is called Vue play, which I directly copy. It's pretty well written.

<video controls :src="playerOptions.sources.src"/>

data() {
    return {
      id: Number,
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // Optional playback speed
        autoplay: false,  // If true, playback starts when the browser is ready
        muted: false,     // By default, any audio will be eliminated.
        loop: false,      // Whether to restart as soon as the video is over.
        preload: 'auto',  // It is recommended whether the browser should start downloading video data after < video > loading elements. auto browser selects the best behavior and starts loading the video immediately (if supported by the browser)
        language: 'zh-CN',
        aspectRatio: '16:9',  // Place the player in smooth mode and use this value when calculating the dynamic size of the player. The value should represent a scale - two numbers separated by colons (for example, "16:9" or "4:3")
        fluid: true,  // When true, video JS player will have fluid size. In other words, it will scale to fit its container.
        sources: [{
          type: "video/mp4",  // type
          src: 'http://localhost:8081/file/video/', // url address
        }],
        poster: '',  // Cover address
        notSupportedMessage: 'This video can't be played right now. Please try again later',  // Allow to overwrite video JS cannot play the default information displayed when the media source.
        controlBar: {
          timeDivider: true,           // Separator for current time and duration
          durationDisplay: true,       // Display duration
          remainingTimeDisplay: false, // Display remaining time function
          fullscreenToggle: true       // Whether to display full screen button
        }
      }
    }
  },

Then write in create () so that we can return the received id to the data.

  created() {
    this.id = parseInt(this.$route.query.userid);//yellow
    console.log(this.id)
    this.playerOptions.sources.src = 'http://localhost:8081/file/video/'+this.id

After the front-end is written, we lo ok back at the back-end: (note that the @ CrossOrigin annotation must be added to the controller, or cross domain failure will occur, but it doesn't matter if you write the api proxy). In the back-end, we can get it by writing a String id separately, and then write the id in the realpath

!!!! Note that the video can only be played in mp4 format!!!!!

 @GetMapping("/video/{id}")
    public void videoPreview(@PathVariable("id") String id,HttpServletRequest request, HttpServletResponse response) throws Exception {
        String sourcePath = ClassUtils.getDefaultClassLoader().getResource("").getPath().substring(1);
        String realPath = sourcePath +"static/video/"+id+".mp4";
        System.out.println(realPath);
        Path filePath = Paths.get(realPath);
        if (Files.exists(filePath)) {
            String mimeType = Files.probeContentType(filePath);
            if (!StringUtils.isEmpty(mimeType)) {
                response.setContentType(mimeType);
            }
            request.setAttribute(NonStaticResourceHttpRequestHandler.ATTR_FILE, filePath);
            nonStaticResourceHttpRequestHandler.handleRequest(request, response);
        } else {
            response.setStatus(HttpServletResponse.SC_NOT_FOUND);
            response.setCharacterEncoding(StandardCharsets.UTF_8.toString());
        }


    }

Finally, you can play the video successfully.

reference resources:

Copyright notice: This is the original article of CSDN blogger "sJLei_38759449", which follows the CC 4.0 BY-SA copyright agreement. Please attach the original source link and this notice for reprint.
Original link: https://blog.csdn.net/weixin_38759449/article/details/104496464

Copyright notice: This is the original article of CSDN blogger "Mulan Cha Mo *", which follows the CC 4.0 BY-SA copyright agreement. Please attach the original source link and this notice for reprint.
Original link: https://blog.csdn.net/jyn15159/article/details/108991713