[Xgplayer] Uso básico de xgplayer | Uso de xgplayer | Súper buen reproductor de video frontal | El mejor reproductor de video frontal de xgplayer

Introducción a xgplayer

1. El equipo de desarrollo - ByteDance, producido por ByteDance, debe ser una boutique.
2. xgplayer es un reproductor de video front-end súper increíble, los siguientes puntos son suficientes para demostrar su poder
   • Producido por una gran fábrica - estable
   • conciso
   • práctico
   • gracia
   • La documentación es clara.
   • Aluvión de apoyo
   • Muy compatible con dispositivos móviles
   • Los complementos personalizados son convenientes y poderosos
   • Solo sé fuerte

---

sitio web oficial de xgplayer

• Sitio web oficial de xgplayer: haz clic en mí para ingresar
• Dirección alternativa https://v2.h5player.bytedance.com/

Xgplayer VS VideoJs

• Recomiendo encarecidamente Xgplayer, el documento es conciso, el complemento es claro de un vistazo y el complemento personalizado es conveniente
• Aunque VideoJs es bueno, pero misceláneo, como la documentación de API, puede ser mi plato.

---

xgplayerdescargar

cnpm install xgplayer

---

componente del jugador

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>

---

usa el reproductor

src/views/HomeView.vue

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

representaciones

---

Fin

2023/3/8 23:38 Serie

---

2023/3/9 1:01 Cambiar

---

2023/3/9 9:24 Segundo cambio

---

2023/3/9 16:59 Tres Cambios

---

9/3/2023 23:12 Cuatro cambios

---

recomendar

1. [xgplayer] xgplayer pitfill && xgplayer full screen entra en conflicto con css full screen
2. 【video】
3. 【Xgplayer】Botón de captura de pantalla personalizado de xgplayer

---