西瓜播放器示例: https://v2.h5player.bytedance.com/examples/ 这里我是用的vue3,我把西瓜播放器封装了个组件,到时候可以复用,vue2也是一样。 步骤如下: 安装 $npminstallxgplayer 1. 引入xgplayer,封装成一个公共组件 src/components/xgPlayer/xgPlayer.vue // 西瓜视频组件 <template> </tem...
xgplayer西瓜视频是一款由字节团队开发的HTML5视频播放器,其原生支持弹幕数组, 可以实现视频弹幕播放的功能,但缺少弹幕发送功能的内置插件,本文以Vue2为代码 框架,通过xgplayer 3.x版本最新的自定义插件流程实现弹幕发送模块开发。1.创建基础插件类 demoBasePlugin.js...
西瓜播放器 xgplayer 使用框架: ant组件 vue3 // npm i xgplayer// npm i xgplayer-mp4(这个在nuxt框架下用 两个都下载)importPlayerfrom'xgplayer'conststate=reactive({list:[{id:1,videoUrl:'视频链接'}],})/** * @description: 配置函数* @param {*} id 视频盒子 id* @param {*} poster 视频 ...
在vue中使用西瓜视频播放器 第一步:npm i xgplayer, 在组件中引入: 1<template>234<!-- -->567891011</template>1213import Player from 'xgplayer';14exportdefault{15data(){16return{17player:null,18posterShow:true,19url: 'http://211.94.219.1/268769823.mp4',20}21},22mounted(){23if(doc...
前端框架层面我使用了 Vue3,代码如下(只是播放器相关部分,不是最终成品的代码) <template> </template> import "xgplayer"; import FlvPlayer from "xgplayer-flv"; // 播放器 const playerRef = ref<FlvPlayer>(); onMounted(async...
在vue中使用西瓜视频播放器 第一步:npm i xgplayer, 在组件中引入: 1 <template> 2 3 4 <!-- --> 5 6 7 8 9 10 11 </template> 12 13 import Player from 'xgplayer'; 14 export default { 15 data(){ 16 return{ 17 player:null, 18 posterShow:true,...
你好,我这边在官方demo里试了确实是好的,但是放到我的vue2,vue3项目里就是不生效,找不到啥原因 回复7月 4 日来自新疆阿克苏地区 Undest: @爽快的熊猫 看看是不是因为版本不同,这个链接是v3开头的https://v3.h5player.bytedance.com/guide/#%E5%9F%BA%E6%9C%AC%E...,你题目里的是v2的 回复7月 9...
西瓜播放器是一个Web视频播放器类库,它本着一切都是组件化的原则设计了独立可拆卸的UI组件。更重要的是它不只是在 UI 层有灵活的表现,在功能上也做了大胆的尝试:摆脱视频加载、缓冲、格式支持对 video 的依赖。尤其是在 mp4点播上做了较大的努力,让本不支持流式播放的 mp4 能做到分段加载,这就意味着可以做到...
前段时间不是写了基于videojs播放器的插件吗,然后看见有人说国内用DPlayer来搭配的比较多,我就找了下DPlayer,但是找的途中,才看见了西瓜播放器这款产品,是字节跳动旗下的开源产品。所以我就直接放弃DPlayer,改用西瓜播放器来试了下。 相比之前Wpmvp的播放器插件,功能差不多,但是代码有所不同,因为识别问题,由于我...
使用xgplayer提供的自定义插件,和原始截图功能代码(规避掉window)结合,开发一个截图功能。 功能开发前置能力 xgplayer的自定义插件开发例子 xgplayer的截图screenShot功能代码查看 自定义截图插件代码参考 import{Plugin}from'xgplayer'const{POSITIONS}=PluginexportdefaultclassdemoPluginextendsPlugin{// 插件的名称,将作为插件...