操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

Vue實現視頻播放列表——video.js組件的使用-實現視頻播放列表-切換播放

1、video標簽——

2、vue-video--適用于 Vue 的 video.js 播放器組件——

3、video.js組件官網——

1、安裝

引入video.js組件

npm --save-dev video.js

或

cnpm --save-dev video.js

然后在mainvue中視頻播放器組件.js中引用

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

引用完成后我們就可以做視頻列表了

2、實例-視頻播放列表

視頻地址鏈接

效果-視頻封面

效果-視頻播放

代碼

indexvue中視頻播放器組件.vue

<script lang="ts" setup>
    import { ref } from 'vue'
    const myVideo = ref()
    // const videoUrl = ref(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>

  
    
  

    

      視頻1
    
    

      視頻2