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

阅读本书更多章节>>>>

文章目录

xgplayer简介xgplayer官网 Xgplayer VS VideoJsxgplayer下载播放器组件效果图推荐

2024/3/10 更新

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

<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 四改

---

推荐

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

---

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/xuetang/2024-04-10/156437.html，文章来源：网络cs，作者：利杜鹃，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！