【Xgplayer】xgplayer基本使用 | xgplayer使用 | 超好的前端视频播放器 | xgplayer前端最好视频播放器

• 2024/3/10 更新

xgplayer简介

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

---

xgplayer官网

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

Xgplayer VS VideoJs

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

---

xgplayer下载

• 注意版本号

cnpm install xgplayer@3.0.14

---

播放器组件

• 更新时间 2024/3/10 21:21
• 版本号 xgplayer@3.0.14

src/components/PlaeryVideo.vue

<template> 
    <div id="player"></div> 
</template>
  
<script setup>
import { onMounted } from "vue";
import Player from "xgplayer";
import "xgplayer/dist/index.min.css";

const playerOpts = {
  id: "player", //元素id
  url: "../../public/4.mp4", //视频地址
  poster: "../../public/bg.jpeg", //封面图
  lang: "zh-cn", //设置中文
  lastPlayTime: 0, //视频起播时间（单位：秒）
  lastPlayTimeHideDelay: 5, //提示文字展示时长（单位：秒）
  closeVideoClick: false, // true - 禁止pc端单击暂停，反之
  closeVideoTouch: true, // true - 禁止移动端单击暂停，反之
  videoInit: true,
  fluid: true, //填满屏幕
  autoplay: false, //自动播放
  loop: false, //循环播放
  pip: true,
  volume: 1, //音量 0 -  1
  playbackRate: [0.5, 0.75, 1, 1.5, 2], //传入倍速可选数组
  // 删除控件
  // ignores: ['time', 'definition', 'error', 'fullscreen', 'i18n', 'loading', 'mobile', 'pc', 'play', 'poster', 'progress', 'replay', 'volume'],
  ignores: ["volume"],
  rotateFullscreen: true,
};

//  播放器
let player = null;

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

---

效果图

---

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自定义截屏按钮

---