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

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

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

页面制作

效果展示

<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>