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

原创已于 2022-08-05 09:39:43 修改 · 3.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #音视频 #前端框架

于 2022-08-04 18:01:14 首次发布

本文介绍了如何使用 Vue.js 实现视频播放组件，包括原生 video 标签的控制，动态切换视频源，以及通过点击切换视频时的样式变化。同时涵盖了自动播放和自动跳转功能的基本实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码：

<template>
  <div style="display: flex">
    <!--  原生video标签，controls表示为可控制视频暂停、跳跃、播放  -->
    <video id="media" class="media" height="600" width="900" controls :src="videoList[videoNow]"></video>
    <div>
      <!-- :class和index判断正在播放哪一个，并改变颜色  -->
      <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换成你自己的请求或者写成静态的就可以了。如果是本地文件建议使用相对定位。

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

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