VUE项目中使用jessibuca实现直播流播放

静态文件引入:

  1. 将静态文件存放到public文件夹下
    例如:
  2. 在index.html中引入
    在这里插入图片描述

具体实现:

<template><div class="container" ref="container" style="width:100%;height:200px;"> </div>
</template><script>export default {data() {return {jessibuca: '',videoUrl:'***********' // 后台推送过来的直播地址};},mounted() {this.play()},methods: {init() {const options = {};this.jessibuca = new window.Jessibuca(Object.assign({container: this.$refs.container, // 播放器容器,若为 string ,则底层调用的是 document.getElementById('id')videoBuffer: 0.2, // 设置最大缓冲时长,单位毫秒,播放器会自动消除延迟。forceNoOffscreen: true, // 是否不使用离屏模式(提升渲染能力)hasAudio: false, // 是否有音频rotate: 0, // 设置旋转角度,只支持,0(默认) ,180,270 三个值isResize: false, // 1.当为true的时候:视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边;2.当为false的时候:视频画面完全填充canvas区域,画面会被拉伸isFullSize: true, // 当为true的时候:视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全debug: false, // 是否开启控制台调试打印timeout: 30, // 设置超时时长, 单位秒,在连接成功之前和播放中途,如果超过设定时长无数据返回,则回调timeout事件supportDblclickFullscreen: true, // 是否支持屏幕的双击事件,触发全屏,取消全屏事件。showBandwidth: false, // 是否显示网速operateBtns: {fullscreen: true,// 是否显示全屏按钮screenshot: true,// 是否显示截图按钮play: true,// 是否显示播放暂停按钮audio: true,// 是否显示声音按钮recorder: false},keepScreenOn: false, // 开启屏幕常亮,在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮。isNotMute: false, // 是否开启声音,默认是关闭声音播放的。loadingText: "加载中...", // 加载过程中文案。background: "", // 背景图片。decoder: '/public/jessibuca/decoder.js',// useMSE: false,isFlv: true,},options));},play() {const url = this.videoUrl;this.init();this.jessibuca.play(url);},destroy() {if (this.jessibuca) {this.jessibuca.destroy();}}}};
</script><style scoped lang="scss"></style>

参考文章:

以上是自己项目里简单使用时的调用方法,如有更多需求需要实现的可参考以下博主的文章:
https://blog.csdn.net/weixin_39277183/article/details/126836811


寄语:

“世界是个回音谷,念念不忘必有回响,你大声喊唱,山谷雷鸣,音传千里,一叠一叠,一浪一浪,彼岸世界都收到了。
凡事念念不忘,必有回响。因它在传递你心间的声音,绵绵不绝,遂相印于心。”

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/298558.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

zabbix-邮件告警与钉钉机器人告警

zabbix-邮件告警 在部署邮件告警前需要先将zabbix部署成功 邮件告警需要得到邮箱的授权码&#xff0c;这里将以qq邮箱为例。 1.获取邮箱的授权码 2.编辑Email的相关信息 3.测试Email是否配置成功 测试成功。 4.为用户添加邮箱报警服务 5.创建主机群组、主机、监视项、触…

Maven高级篇

Maven依赖管理原则; 可选依赖&#xff1a;隐藏当前项目中的指定的包&#xff0c;如此&#xff0c;别的包引用当前包时&#xff0c;当前包中的指定包就被隐藏了&#xff0c;在别的包中无法看到隐藏的包 排除依赖&#xff1a;指定排除引用包中所包含的依赖&#xff0c;防止与当…

【数据结构和算法】删掉一个元素以后全为 1 的最长子数组

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、题目描述 二、题解 2.1 方法一&#xff1a;滑动窗口 2.2 滑动窗口解题模板 三、代码 3.1 方法一&#xff1a;滑动窗口 四…

【每日一题】美丽塔 II

Tag 【单调栈】【数组】【2023-12-21】 题目来源 2866. 美丽塔 II 题目解读 题目意思相对明确&#xff0c;所谓的美丽塔数组就是山状数组&#xff0c;即有一个高度为 maxHeight[i] 的山峰&#xff0c;山峰两侧的高度要小于 maxHeight[i] 并且小于各自的允许高度。需要找出满…

台达A2-M伺服

地址: P3.00 从站地址0x01~0x7F【1~127】 P3.01 通讯速度UZYX【0403】 X:0【4800】1【9600】2【19200】3【38400】4【57600】5【115200】Z:0【125Kbit/s】1【250】2【500】3【750】4【1Mbit/s】 P3.02 通讯格式6【8N2】7【8E1】8【8O1】 P3.03 1通讯错误刹停…

每日一题——LeetCode141.环形链表

个人主页&#xff1a;白日依山璟 专栏&#xff1a;Java|数据结构与算法|每日一题 文章目录 1. 题目描述示例1&#xff1a;示例2&#xff1a;示例3&#xff1a;提示: 2. 思路3. 代码 1. 题目描述 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某…

synchronized详解

synchronized详解 基本使用源码解析常见面试题好书推荐 基本使用 Java中的synchronized关键字用于在多线程环境下确保数据同步。它可以用来修饰方法和代码块 当一个线程访问一个对象的synchronized方法或代码块时&#xff0c;其他线程将无法访问该对象的其他synchronized方法…

QT 构建项目报错Could not initialize class org.codehaus.groovy.vmplugin.v7.Java7

问题 Getting NoClassDefFoundError: Could not initialize class org.codehaus.groovy.vmplugin.v7.Java7获取 NoClassDefFoundError&#xff1a;无法初始化类 org.codehaus.groovy.vmplugin.v7.Java7 解决方法一 java版本 过高 将java版本降低&#xff0c;例如从java17降…

「Verilog学习笔记」并串转换

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 串并转换操作是非常灵活的操作&#xff0c;核心思想就是移位。串转并就是把1位的输入放到N位reg的最低位&#xff0c;然后N位reg左移一位&#xff0c;在把1位输入放到左移后…

「模问题」AI原生小游戏强势来袭!

WAVE SUMMIT 深度学习开发者大会2023 举办在即&#xff0c;为了让大家更好地体验文心大模型的各项能力&#xff0c;掌握Prompt的使用技巧&#xff0c;我们带来一个惊喜的消息&#xff1a;全新AI原生小游戏——「模问题」火热上线啦&#xff01; 「模问题」是基于文心大模型的能…

磁钢的取向和充磁方向

充磁是磁钢生产中的必备工序&#xff0c;如果磁铁不充磁&#xff0c;就不具备磁性&#xff0c;也就丧失了作为永磁材料的基本功能。磁钢作为一个立体的工件&#xff0c;形状和尺寸各异&#xff0c;如何给磁钢充磁&#xff1f;不同方向的充磁效果一样吗&#xff1f;今天我们就来…

智能仓储管理系统设计与实现

智能仓储管理系统设计与实现 第一章 绪论 1.1 设计背景 物联网&#xff08;英文&#xff1a;Internet of Things&#xff0c;缩写&#xff1a;IoT&#xff09;是万物相连的互联网&#xff0c;即把所有物品通过信息传感设备与互联网连接起来&#xff0c;以实现智能化识别、定位、…