xgplayer西瓜视频是一款由字节团队开发的HTML5视频播放器,其原生支持弹幕数组, 可以实现视频弹幕播放的功能,但缺少弹幕发送功能的内置插件,本文以Vue2为代码 框架,通过xgplayer 3.x版本最新的自定义插件流程实现弹幕发送模块开发。1.创建基础插件类 demoBasePlugin.jsimport BasePlugin from
importXgplayerfrom'xgplayer-vue'; import'xgplayer-custom'; Demo $ git clone git@github.com:bytedance/xgplayer-vue.git $ cd xgplayer-vue $ npm install $ npm start please visithttp://localhost:9090/index.html License MIT Install npm ixgplayer-vue ...
这里是在Vue3中,去举这个例子,主要是学习xgplayer的配置项语法规则 首先来一个DOM元素,作为xgplayer的占位的地方 <template> </template> 然后把xgplayer下载一下,在引入到对应.vue文件中使用,指定配置项,就能够出来对应效果了 下载npm i xgplayer --save 这里是单独封装一个MyVideo组件,便于复用 <template> </...
这里是在Vue3中,去举这个例子,主要是学习xgplayer的配置项语法规则 首先来一个DOM元素,作为xgplayer的占位的地方 <template> </template> 然后把xgplayer下载一下,在引入到对应.vue文件中使用,指定配置项,就能够出来对应效果了 下载npm i xgplayer --save 这里是单独封装一个MyVideo组件,便于复用 <template> </...
{ // 使用vue组件 const Component = Vue.extend(Demo) this.vm = new Component().$mount('.demo-plugin') // 视频播放时 this.on(Events.PLAY, () => { this.vm.hide() }) // 视频暂停时 this.on([Events.PAUSE], () => { this.vm.show() }) } destroy() { // 播放器销毁的时候...
前端框架层面我使用了 Vue3,代码如下(只是播放器相关部分,不是最终成品的代码) <template></template>import "xgplayer";import FlvPlayer from "xgplayer-flv";// 播放器const playerRef = ref<FlvPlayer>();onMounted(async () => {room.info = await getRoomInfo(props.roomId);if (room.info.isLiving)...
importXgplayerfrom'xgplayer-vue';exportdefault{components:{Xgplayer}} Step 2. Use in template <Xgplayer:config="config"@player="Player = $event"/> Step 3. Config for xgplayer exportdefault{data(){return{config:{id:'vs',url:'/xgplayer-demo.mp4'},Player:null}}} ...
style: { //弹幕自定义样式 color: "#ff9500", //例:'#ff9500', fontSize: "100px", padding: "20px 11px" //例: 2px 11px', }, 最新版本的danmu插件 import {createApp, onMounted} from 'vue' import Player from 'xgplayer'; import 'xgplayer/dist/index.min.css'; im
xgplayer-vue:xgplayer的Vue组件,这是一个HTML5视频播放器,具有解析器,可以节省流量 介绍xgplayer是一个网络视频播放器库。 它基于一切都被组件化的原则设计了一个单独的,可分离的UI组件。 更重要的是,它不仅在UI层上很灵活,而且在功能上也大胆:它摆脱了视频加载,缓冲和对视频依存性的格式支持。 特别是在mp4上,...
还有好多,具体的可以去官网查看相关的配置 丰富的插件和api 具体的内容太多了,如果有需要的可以去官网查看相关的配置。 音乐播放器 竟然还支持音乐播放…… 总结 官网还有很多实用的在线工具和示例Demo。大家可以去官网查看,总之一定会有你想不到的配置和功能。