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

本文介绍了如何使用 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换成你自己的请求或者写成静态的就可以了。如果是本地文件建议使用相对定位。

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

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

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值