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

2024-06-04 4359阅读

文章目录

xgplayer简介

xgplayer官网
Xgplayer VS VideoJs
xgplayer下载
播放器组件
效果图

xgplayer简介

开发团队——字节跳动，字节跳动出品，必属精品。
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

 
     

  

impindex.php/tags-1038.html" class="superseo">ort { 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);
});