vue使用原生video标签基本功能（不含样式）

        直接上代码：

<template>
  <div style="display: flex">
    
    <video id="media" class="media" height="600" width="900" controls :src="videoList[videoNow]">video>
    <div>
      
      <div v-for="(item,index) in videoName" @click="changeVideo(index)" :class="{showNow:index === videoNow}">
        {{item}}
      div>
    div>
  div>
template>
 
<script>
 
export default {
  name: "VideoShow",
  data(){
    return{
      //记录正在播放哪一个
      videoNow:0,
      //存放视频url数组
      videoList:[],
      //存放视频名称数组
      videoName:[]
    }
  },
  mounted() {
    this.getVideos()
    this.goNext()
  },
  methods:{
    //模拟获取视频url网络请求
    getVideos(){
      this.videoList=['url0','url1','url2','url3','url4','url5']
      this.videoName=['name0','name1','name2','name3','name4','name5']
    },
    //切换视频
    changeVideo(index){
      this.videoNow = index
    },
    //自动播放下一个和准备就绪就播放
    goNext(){
      const that = this
      let media = document.getElementById("media");
      //监听视频准备完毕马上播放，不需要可以注释  
      media.oncanplay = function(){
        media.play()
      };
      //监听播放完成后马上播放下一个，不需要可以注释  
      media.addEventListener('ended',function(){
        //判断视频url数量,播放完最后一个自动播放第一个
        if(that.videoNow < that.videoList.length-1){
          that.videoNow++
        }else {
          that.videoNow = 0
        }
      });
    }
  }
}
script>
 
<style scoped>
.media{
  background-color: black;
}
.showNow{
  color: pink;
}
style>

        功能都在注释中解释了。把模拟获取视频url网络请求的getVideos换成你自己的请求或者写成静态的就可以了。如果是本地文件建议使用相对定位。

        额外功能包括了自动播放和自动跳跃下一条视频。方法都很基本，很容易理解。

        具体样式根据你的需求修改，代码中只体现出了播放对应视频时视频对应名改变颜色。