持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

先来个截图看看最终效果😋:

本demo最终使用的 @cloudgeek/vue3-video-player 组件

在写小demo的时候，各个支持vue3的video 组件稍微了解了一下。。

**相关播放器如下👨‍🌾 : **

• video.js 原生video插件，需要封装，有空可以研究一下
• vue3-video-play 很漂亮的播放器，功能也比较丰富,不过有网友反应移动端无法播放，如果纯pc端，应该不介意
• ArtPlayer html5播放器，支持的框架很多，像vue,react都行，就是网上资料较少，不过官网有demo和example
• 西瓜视频播放器 也是个html5播放器，也是功能丰富，是西瓜视频官网开源的
• vue3-video-player 本demo使用的播放器，因为看github上最近有更新，应该不是那种说放就放的项目吧，所以就用了

项目说明🚉

demo使用的技术为: vue3(setup语法)+element-plus(只有一个容器布局)+vue-router4+视频组件，没有使用其他库

组件调用使用的父传子，子传父两种方式

数据直接使用列表 写死在组件中

demo中使用的到的布局和样式参考这个例子: github.com/core-player… 部分样式略有改动

项目布局🍏

使用element-plus的三分布局容器

基中Header组件和Footer组件 就是随便写了点内容填充，主要播放逻辑在el-main里面

//MainPage.vue 父组件
    <div class="common-layout">
        <el-container>
            <el-header class="header">
                <Header></Header>
            </el-header>
            <div class="main">
                <div class="main-play">
                <el-main>                    
                    <Vue3VideoPlayerVue :src="src" :title="title" :cover="cover"></Vue3VideoPlayerVue>
                </el-main>
                </div>
                <div class="main-list">
                    <h3>播放列表</h3>
                <PlayList @fn="playListData">
                </PlayList>
                </div>
            </div>
            <Footer></Footer>

        </el-container>
    </div>
<script setup>
import Footer from '@/components/FooterPage';
import Header from '@/components/HeaderPage';
//播放器组件
import Vue3VideoPlayerVue from './Vue3VideoPlayer.vue';
//播放列表组件
import PlayList from './PlayList';
import { ref } from 'vue';

const src = ref('https://xxxx.mp4')
const title = ref('绿色自然')
const cover = ref('https://xxxx.jpg')

//子向父组件通信的方法
const playListData = ((src2,cover2,title2) => {
    src.value = src2;
    cover.value = cover2;
    title.value = title2;
})

</script>    

播放器组件(父向子组件通信)🍓

安装和使用

//下载 
npm install @cloudgeek/vue3-video-player --save

//main.js 入口引入,全局可使用
import Vue3VideoPlayer from '@cloudgeek/vue3-video-player'
import '@cloudgeek/vue3-video-player/dist/vue3-video-player.css'

app.use(Vue3VideoPlayer, {
  lang: 'zh-CN'
})

父组件(MainPage.vue)向子组件(Vue3VideoPlayer.vue)通信

//Vue3VideoPlayer.vue 子组件
<template>
    <div class="player-container">
        <vue3-video-player @play="playVideo" :src="src" :title="title" :cover="cover"></vue3-video-player>
    </div>
</template>

<script setup>
import { defineProps } from 'vue';

//定义来自父组件传来的参数
defineProps({
    title: {
        type: String,
        default: "",
    },
    src: {
        type: String,
        default: "",
        required: true,
    },
    cover: {
        type: String,
        default: "",
    }
})

//点击测试
const playVideo = (() => {
    console.log("playvideo")
})
</script>

播放列表组件(子向父组件通信)🍅

避免代码量过多，样式代码没有贴过来，请参考前面项目说明

该组件会向父组件(MainPage.vue) 传递 点击数据(点击时绑定的数据作为参数)

//PlayList.vue
<template>
  <div v-for="item in dataJson" :key="item.id" :item="item">
    <div class="paly-list" @click="changePaly(item.source,item.cover,item.title)">
      <div class="cover">
        <img :src="item.cover" alt="cover" />
        <div class="duration">{{ item.duration }}</div>
      </div>
      <div class="detail">
        <div class="title">{{ item.title }}</div>
        <div class="author">{{ item.author }}</div>
        <div class="date">{{ item.date }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['fn'])

const changePaly = ((src,cover,title) => {
  console.log("changePaly")
  emit('fn',src,cover,title)
})

//数据例子，其中mp4和jpg 不便展示
const dataJson = [{
  id: '1',
  title: '盘山公路',
  author: 'none',
  date: '2021',
  cover: 'https://xxx.jpg',
  source: 'https://xxx.mp4',
  duration: '00:00:51'
}, {
  id: '2',
  title: '大山白云',
  author: 'none',
  date: '2022',
  cover: 'https://xxx.jpg',
  source: 'https://xxx.mp4',
  duration: '00:00:20'
}];
</script>

总结🙆‍♂️

1. vue3现在播放器可供选择的还蛮多的🌸
2. 使用原生css布局，代码量确实多，目前正在尝试windicss🌵
3. 父子，子父调用在vue3中简便了很多，对象和函数还是props和emit🌲
4. setup语法确定爽，感觉回不去了🌷

💥💥💥💥💥JYM觉好留赞啊💥💥💥💥💥