使用vant制作一个视频播放的功能

Bertha 。 2024-03-16 17:43 11阅读 0赞

## 使用vant制作一个视频播放的功能 ##

简介：本文是一个用结合vant制作的一个视频播放功能的页面。

### 页面制作 ###

效果展示  
![在这里插入图片描述][dc5fa759dcae40db9133450b6bc1d8dc.png]

![在这里插入图片描述][2db553ae0c3042dd855dd368169cab11.png]

<template>
      <div class="video-page">
        <van-nav-bar
          title="视频"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
        <div class="video-container">
          <video controls :src="src"></video>
        </div>
      </div>
    </template>
    
    <script>
    import axios from "axios";
    
    export default {
          
      data() {
          
        return {
          
          id: "",
          src: null,
        };
      },
      methods: {
          
        onClickLeft() {
          
          this.$router.push("/point");
        },
      },
      mounted() {
          
        console.log("id:" + this.$route.query.id);
        this.id = this.$route.query.id;
        axios
          .get(`http://localhost:8083/video/${ this.id}`)
          .then((res) => {
          
            this.src = res.data.data.src;
          })
          .catch((error) => {
          
            console.log(error);
          });
      },
    };
    </script>
    
    <style scoped>
    .video-page {
          
      height: 100%;
    }
    
    .video-container {
          
      display: flex;
      justify-content: center;
      align-items: center;
      height: calc(100% - 44px);
    }
    
    video {
          
      max-width: 100%;
      outline: none;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      border-radius: 8px;
    }
    </style>

[dc5fa759dcae40db9133450b6bc1d8dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/e18fe6c1d0df40d2913d8b455cbfecdd.png
[2db553ae0c3042dd855dd368169cab11.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/80e5551da2e94405a1edf62e49915f72.png