Vue实现视频播放列表（二）——video.js组件的使用-实现视频播放列表-切换播放

Vue实现视频播放列表——video.js组件的使用-实现视频播放列表-切换播放

1、video标签——https://www.runoob.com/html/html-videos.html

2、vue-video-player-适用于 Vue 的 video.js 播放器组件——

https://github.com/surmon-china/vue-video-player

https://www.npmjs.com/package/vue-video-player

3、video.js组件官网——https://www.npmjs.com/package/video.js

1、安装

引入video.js组件

npm install --save-dev video.js

或

cnpm install --save-dev video.js

然后在main.js中引用

import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$videos = Video

引用完成后我们就可以做视频列表了

2、实例-视频播放列表

视频地址链接

https://docs.egret.com/engine/img/engine2d.mp4
https://vjs.zencdn.net/v/oceans.mp4

效果-视频封面

效果-视频播放

代码

index.vue

<script lang="ts" setup>
    import { ref } from 'vue'
    const myVideo = ref()
    // const videoUrl = ref<string | null>(null)  //默认为空
    const videoUrl = ref('https://vjs.zencdn.net/v/oceans.mp4')  //默认视频
    const videoShowA = (e: any) => {
      // videoUrl.value = e
      myVideo.value.src = e
      console.log(e, 'kkkkkkkkk')
    }
    const videoShowB = (e: any) => {
      // videoUrl.value = e
      myVideo.value.src = e
      console.log(e, 'hhhhhhhhhh')
    }
</script>

<div class="yj-txt">
  <video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    ref="myVideo"
    poster="./1.jpg"
    data-setup="{}"
  >
    <!-- poster="//vjs.zencdn.net/v/oceans.png" -->
    <!--  src="./video.mp4" -->
    <source
      :src="videoUrl"
      type="video/mp4"
    >
  </video>

  <!-- 视频名称列表布局 -->  
  <div class="video-txt">
    <div @click="videoShowA('https://vjs.zencdn.net/v/oceans.mp4')">
      视频1
    </div>
    <div @click="videoShowB('https://docs.egret.com/engine/img/engine2d.mp4')">
      视频2
    </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>