vue2中使用xgplayer播放流视频

1、官网

2、安装后无法播放时,经测试,需要降低版本

javascript 复制代码
    "xgplayer-hls": "2.2.2",
    "xgplayer": "2.31.6"

改为以上版本可以正常播放

3、完整使用

(1)引入

javascript 复制代码
import 'xgplayer'
import hlsjsPlayer from 'xgplayer-hls'

(2)初始化

javascript 复制代码
      this.player = new hlsjsPlayer({
        id: 'myFlvVideo',
        url: 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8',
        height: '100%',
        width: '100%',
        isLive: true,
        autoplay: true,
        playsinline: true,
        volume: 0, //音量
        screenShot: true, //截图
      })

(3)销毁

javascript 复制代码
// 播放器销毁
this.player.destroy(true)
相关推荐
linux_cfan2 小时前
videojs v10 源代码系列解读:35 · HLS 解析器:multivariant 与 media playlist
前端·javascript·音视频
硬件学长森哥12 小时前
成像技术实例-HDR视频技术基础
图像处理·音视频
美狐美颜SDK开放平台16 小时前
Android与iOS直播APP美颜有什么区别?视频美颜SDK开发详解
android·ios·音视频·视频美颜sdk
2601_9556624617 小时前
文本转语音(TTS)技术选型与工程实践
大数据·人工智能·音视频·语音识别·媒体
贾伟康18 小时前
【HarmonyOS 7新能力|066】弱网直播优化实战:从网络感知到码率、缓冲与恢复
音视频·harmonyos·arkts·网络优化·弱网直播
Android系统攻城狮19 小时前
Linux Gstreamer深度解析之gst_audio_decoder_get_parse_state调用流程与实战(四十九)
linux·音视频·gstreamer音视频·gstreamer音视频进阶
勤劳X码农19 小时前
2026年TTS工具音频质量量化评测:MOS评分、延迟与格式兼容性实测
音视频
AI天行健20 小时前
内容工作室 AI 视频量产选型:星宇智算无限画布能解决哪些生产卡点
人工智能·音视频
小猴子爱上树21 小时前
跨马翻译:批量图片翻译+视频字幕+智能抠图一站式工具
python·音视频
火山引擎边缘云1 天前
从“看见文字”到“读懂画面”:AI MediaKit 如何实现视频字幕无痕擦除
人工智能·音视频