xgplayer简介

1. 开发团队——字节跳动，字节跳动出品，必属精品。
2. xgplayer是一个超级牛逼的前端视频播放器，以下几个观点足以证明它的强大
   • 大厂出品——稳
   • 简洁
   • 实用
   • 优雅
   • 文档清晰明了
   • 支持弹幕
   • 对移动端非常友好
   • 自定义插件方便且强大
   • 强就是了

xgplayer官网

• xgplayer官网-点我进入
• 备用地址 https://v2.h5player.bytedance.com/

Xgplayer VS VideoJs

• 强烈推荐Xgplayer ，文档简洁、插件一目了然、自定义插件方便
• VideoJs虽好，但杂，例如api文档，也可能是我菜吧。

xgplayer下载

cnpm install xgplayer

播放器组件

src/components/PlaeryVideo.vue

<template>
    <div id="player"></div>
</template>

<script setup>
import { onMounted, reactive } from 'vue';

import Player from 'xgplayer/dist/simple_player';

import volume from 'xgplayer/dist/controls/volume';//音量
import download from 'xgplayer/dist/controls/download';//下载按钮
import playNext from 'xgplayer/dist/controls/playNext';//下一视频
import playbackRate from 'xgplayer/dist/controls/playbackRate';//视频倍速
import pip from 'xgplayer/dist/controls/pip';//画中画
import miniplayer from 'xgplayer/dist/controls/miniplayer';//迷你播放器
import cssFullscreen from 'xgplayer/dist/controls/cssFullscreen';//样式全屏
import screenShot from 'xgplayer/dist/controls/screenShot';//截屏

import { toggleClass } from 'xgplayer/src/utils/util';

const playerOpts = { 
    id: 'player',//元素id
    url: '/public/video/4.mp4',//视频地址 
    lang: 'zh-cn',//设置中文
    // pip: true,//开启画中画 | 移动端无画中画模式

    // 迷你播放器功能支持用户在浏览网页其它内容时继续以小窗的形式观看视频，同时可以拖拽改变小窗在页面中的fix位置。
    // miniplayer: true,//是否开启迷你播放器
    // 迷你播放器配置
    // miniplayerConfig: {
    //     bottom: 200,
    //     right: 0,
    //     width: 320,
    //     height: 180
    // },

    // 进度条标记
    progressDot: [
        {
            time: 3,
            text: "朱英",
            style: { //标记样式
                background: '#1989fa',
                'border-radius': 0
            }
        },
        {
            time: 5,
            text: "周慧敏",
            style: { //标记样式
                background: 'cyan',
                'border-radius': 0
            }
        },
        {
            time: 8,
            text: "张柏芝",
            style: { //标记样式
                background: 'yellow',
                'border-radius': 0
            }
        },
        {
            time: 10,
            text: "邱淑贞",
            style: { //标记样式
                background: 'skyblue',
                'border-radius': 0
            }
        },
        {
            time: 12,
            text: "李嘉欣",
            style: { //标记样式
                background: 'orange',
                'border-radius': 0
            }
        },
        {
            time: 15,
            text: "蓝洁瑛",
            style: { //标记样式
                background: '#08ffc8',
                'border-radius': 0
            }
        },
        {
            time: 17,
            text: "张曼玉",
            style: { //标记样式
                background: '#204969',
                'border-radius': 0
            }
        },
        {
            time: 20,
            text: "王祖贤",
            style: { //标记样式
                background: '#e41749',
                'border-radius': 0
            }
        },
        {
            time: 22,
            text: "梅艳芳",
            style: { //标记样式
                background: '#ff502f',
                'border-radius': 0
            }
        },
        {
            time: 24,
            text: "林青霞",
            style: { //标记样式
                background: '#8134af',
                'border-radius': 0
            }
        }
    ],

    closeVideoClick: false,// true - 禁止pc端单击暂停，反之
    closeVideoTouch: true, // true - 禁止移动端单击暂停，反之
    // closeInactive: true ,// 使播放器控制栏不隐藏，反之 

    fluid: true,//填满屏幕
    autoplay: true,//自动播放
    loop: false,//循环播放
    videoInit: true,//显示第一帧为封面 | 该配置在移动端无效 | 与autoplay配置项不可同时设置为true
    poster: '',//封面图

    // 移动端重要配置
    // 对于9:16的视频友好
    cssFullscreen: true,
    volume: 1,//音量 0 -  1
    // 截图
    // screenShot:false,
    screenShot: {
        saveImg: false,//是否下载
        quality: .92,//图片质量,
        type: 'image/png',
        format: '.png'
    },
    playbackRate: [0.5, 0.75, 1, 1.5, 2], //传入倍速可选数组
    // defaultPlaybackRate: 1,//默认倍速


    // 下一集视频
    // playNext: {
    //     urlList: [
    //         '/public/video/2.mp4',
    //         '/public/video/3.mp4',
    //         '/public/video/1.mp4',
    //     ],
    // },

    // 删除控件
    // ignores: ['time', 'definition', 'error', 'fullscreen', 'i18n', 'loading', 'mobile', 'pc', 'play', 'poster', 'progress', 'replay', 'volume'],

    // 菜单控件
    controlPlugins: [
        // volume,// 音量按钮 移动端不推荐显示该按钮，原因：有点多余
        playbackRate,//倍速
        download,//设置download控件显示
        // playNext,//下一集视频按钮   
        // pip,//画中画
        // miniplayer,// 迷你播放器控件
        cssFullscreen,//竖屏全屏
        screenShot,//截屏
    ],

};

//  播放器 
let player =  null

// 必须在onMounted 或 nextTick实例Xgplayer播放器
onMounted(() => {
    player = new Player(playerOpts)

    // 加载完毕
    player.once('ready', () => {
        setTimeout(() => {
            // 这里可以对Xgplayer操作
        });
    });
})
</script>

使用播放器

src/views/HomeView.vue

<template>
    <!-- 使用视频组件 -->
    <video-player />
</template>

效果图

End

2023/3/8 23:38 辑

2023/3/9 1:01 一改

2023/3/9 9:24 二改

2023/3/9 16:59 三改

2023/3/9 23:12 四改

推荐

1. 【xgplayer】xgplayer填坑记 && xgplayer全屏与css全屏冲突
2. 【videojs】
3. 【Xgplayer】xgplayer自定义截屏按钮