文章目录
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.14src/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 四改