Vue實(shí)現(xiàn)視頻播放列表——video.js組件的使用-實(shí)現(xiàn)視頻播放列表-切換播放

1、video標(biāo)簽——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組件官網(wǎng)——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、實(shí)例-視頻播放列表

視頻地址鏈接

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) //默認(rèn)為空const videoUrl = ref('https://vjs.zencdn.net/v/oceans.mp4') //默認(rèn)視頻const videoShowA = (e: any) => {// videoUrl.value = emyVideo.value.src = econsole.log(e, 'kkkkkkkkk')}const videoShowB = (e: any) => {// videoUrl.value = emyVideo.value.src = econsole.log(e, 'hhhhhhhhhh')} </script><div class="yj-txt"><videoid="my-player"class="video-js"controlspreload="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>

總結(jié)

以上是生活随笔為你收集整理的Vue实现视频播放列表（二）——video.js组件的使用-实现视频播放列表-切换播放的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。