xgplayer 视频
一、xgplayer官网
xgplayer官网 - 点我进入
一、xgplayer简单介绍
西瓜播放器是字节跳动推出的一款播放器。
- 稳定性好(大厂(字节跳动)出品);
- 插件方便实用且简洁高雅;
- 官网文档清晰;
- 集成在线生成工具;
- 提供示例;
总之好用实用方便就完事了
三、xgplayer下载
注意:我是在Vue3项目中使用的,版本号为 3.0.16
pnpm install xgplayer@3.0.16
四、项目中简单使用
<template><div id="mse" />
</template><script setup lang="ts">
import { onMounted } from "vue";
import Player from "xgplayer";
import "xgplayer/dist/index.min.css";defineOptions({name: "VideoPage"
});onMounted(() => {new Player({id: "mse", //元素idlang: "zh", //设置中文volume: 0, // 默认静音autoplay: false, //自动播放screenShot: true, // 开启截图功能//视频地址url: "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4",//封面图poster:"//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",fluid: true, // 填满屏幕 (流式布局)playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组});
});
</script><style scoped>
#mse {flex: auto;
}
</style>
效果:
xgplayer 视频