vue视频播放器vue-video-player

原创

已于 2022-06-05 11:04:34 修改 · 1.5w 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2020-01-04 16:32:00 首次发布

本文介绍如何在Vue项目中集成视频播放器和轮播图组件，实现视频和图片的无缝切换。通过使用vue-video-player和vant组件库，详细展示了组件的配置、样式调整及交互逻辑。

npm i vue-video-player -D
main.js引入
import VideoPlayer from ‘vue-video-player’
require(‘video.js/dist/video-js.css’)
require(‘vue-video-player/src/custom-theme.css’)
Vue.use(VideoPlayer)

<template>
    <div class="my-video">
        <van-swipe ref="goods_swipe" class="goods-swipe" @change="onChange">
            <van-swipe-item>
                <video-player class="goods-video" ref="videoPlayer" :options="playerOptions"></video-player>
            </van-swipe-item>
            <van-swipe-item v-for="(item,index) in imgList" :key="index">
                <van-image :src="item.image" />
            </van-swipe-item>
            <div class="swipe-item-category" slot="indicator">
                <span class="text" :class="{ac:current==0}">视频</span>
                <span class