Vue实现视频播放列表（三）02——使用video.js时，audiovideo标签动态绑定src属性，实现视频播放列表-动态切换视频封面、视频链接

Vue实现视频播放列表（三）02——使用video.js时，audio/video标签动态绑定src属性，实现视频播放列表-动态切换视频封面、视频链接

video.js官网——https://www.npmjs.com/package/video.js

效果

效果-视频列表目录

效果-视频列表播放

代码

index.vue

<script lang="ts" setup>
    import { ref } from 'vue'
    const myVideo = ref()

    const videoImg = ref('https://cn.vuejs.org/images/logo.svg')
    const videoUrlList = ref([
      {
        id: 1,
        urlName: '视频1',
        urlImg: 'https://cn.vuejs.org/images/logo.svg',
        urlMp4: 'https://vjs.zencdn.net/v/oceans.mp4'
      },
      {
        id: 2,
        urlName: '视频2',
        urlImg: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        urlMp4: 'https://docs.egret.com/engine/img/engine2d.mp4'
      }
    ])
    // const videoUrl = ref<string | null>(null)
    // const videoUrl = ref('https://vjs.zencdn.net/v/oceans.mp4')
    const videoUrl = ref(videoUrlList.value[1].urlMp4)
    const videoShow = (e: any) => {
      // videoUrl.value = e
      myVideo.value.src = e.urlMp4
      videoImg.value = e.urlImg
    }
</script>

<div class="yj-txt">
    <video
      id="my-player"
      class="video-js"
      controls
      preload="auto"
      ref="myVideo"
      :poster="videoImg"
      data-setup="{}"
    >
      <source
        :src="videoUrl"
        type="video/mp4"
      >
    </video>
    <!-- 视频名称列表布局 -->
    <div
      class="video-txt"
      v-for="(item,i) in videoUrlList"
      :key="i"
    >
      <div @click="videoShow(item)">
        {{ item.urlName }}
      </div>
    </div>
</div>

<style lang="scss" scoped>
    .yj-txt{
      color: #fff;
      font-size: 36px;
      display: inline-block;
      padding-left: 40px;
      margin-top: 30px;

    } 
  //播放器样式
   video#my-player.video-js {
     float: left;
     width: 70%;
     height: 580px;
  }
  .video-txt{
    float: left;
    margin-left: 40px;
  }
</style>