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

文章目录

• xgplayer简介
• • xgplayer官网
  • Xgplayer VS VideoJs
  • 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

                      impindex.php/tags-1038.html" >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);});

              ---

              效果图

              ---

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

              ---