Vue中Jessibuca播放器的使用

最新推荐文章于 2025-06-12 14:22:27 发布
最新推荐文章于 2025-06-12 14:22:27 发布
阅读量687 收藏 2
点赞数 2
CC 4.0 BY-SA版权
文章标签： vue.js 实时音视频
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xuemeizeng/article/details/140441731

Vue中Jessibuca播放器的使用步骤

自己在项目中，多次使用Jessibuca播放器，但是因为步骤太多，导致经常忘记，这篇博客用来记录Jessibuca引入Vue的步骤

  1. 引入Jessibuca播放器的js文件，放在public文件夹里，以下图片代码里面的js，都需要引用进来
    在这里插入图片描述
    在这里插入图片描述

  2. 注意注意注意 ---- 在创建播放器时，decoder的地址要写正确
    在这里插入图片描述

  3. 我自己写的play组件要引入进页面，可以多屏播放

  4. 经证实http的flv只能播6路，所以换了ws地址播放，解决了这个问题

xuemeizeng
关注
vue2之jessibuca视频插件使用教程
ll_883963的博客
07-25 3450
Jessibuca是一款开源的纯H5直播流播放器，通过Emscripten将音视频解码库编译成Js（ams.js/wasm)运行于浏览器之中。兼容几乎所有浏览器，可以运行在PC、手机、微信中，无需额外安装插件。
记录一次vue使用jessibuca的视频插件
yumengtingkeai的博客
03-29 3811
jessibuca纯H5直流播放器,兼容几乎所有浏览器，可以运行在 PC、手机、微信中，无需额外安装插件。
关于jessibuca使用的问题
最新发布
qq_16463875的博客
06-12 268
通过各种排查，打开控制台发现JS请求发现，decoder-pro.js 文件没有被引用，出现的是404.开始一直在排查问题，因为在index.html 文件中能够正确获取到jessibuca的-demo文件。但是出现的问题是，其实在页面文件中，出现引用出错。出现的问题是因为设置了，基础路径，但是在引用外部资源的时候没有正确引用路径，因为这里是不会直接读取vue里面的文件。栏目需要加上基础路径在能正确引用。这是在使用jessibuca 在uniapp 开发的H5组件时候出现的文件引用错误，出现问题是。
vue中jessibuca视频插件初使用
lff980111的博客
12-11 3181
jessibuca 是一款开源的纯 H5 直播流播放器，通过 Emscripten 将音视频解码库编译成 Js（ams.js/wasm) 运行于浏览器之中。兼容几乎所有浏览器，可以运行在 PC、手机、微信中，无需额外安装插件。
VUE直播流播放器 使用jessibuca插件-支持H264，H265格式播放。
热门推荐
m0_63183059的博客
09-14 1万+
1.基于MediaSource/Webcodec/ WebAssembly(wasm)实现的纯JavaScript直播播放器。 2.支持ws-raw、http(ws)-flv、hls、webTransport、webrtc、http(ws)-fmp4、http(ws)-h264、http(ws)-h265多种播放格式。
VUE项目中使用jessibuca实现直播流播放
qq_41238459的博客
12-21 2170
VUE项目中使用jessibuca实现直播流播放
vue2之jessibuca视频插件使用教程之字体文件
07-25
vue2之jessibuca视频插件使用教程之字体文件
jessibuca-vue-ts-demo-3 ts语法实例
03-21
我们可以通过分析这些文件来学习如何在Vue.js中使用TypeScript。 1. **Props的类型定义**：在Vue组件中，我们可以为接收的props定义类型。例如，`interface Props { key: string; value: number }`，然后在组件中...
jessibuca:Jessibuca是一款开源的纯H5直播流播放器
04-28
Jessibuca 纯H5直播流播放器 打开播放器 /player.md 2 auto title details 无插件 基于ASM.js/WebAssembly(wasm)实现的纯JavaScript直播播放器 title details 低延时 能够在 PC\Android\iOS 浏览器Webview 内实现2秒...
Vue使用
qq_53318060的博客
03-15 1174
<div id="app"> <h1>{{ message + "你好" }}</h1> <!-- {{ }} 绑定文本 --> <img :src="url" alt="" width="200px"> <!-- :绑定属性 --> <button @click="sayHi">测试按钮</button> ...
jessibuca-demo:杰西布卡（Jessibuca）演示
05-08
杰西布卡·德莫 杰西布卡（Jessibuca）演示
jessibuca+vue+js
01-31
用于播放监控
JessibucaH5直播流播放器 v1.0
08-14
Jessibuca是一款开源的纯H5直播流播放器，通过Emscripten将音视频解码库编译成Js（ams.js/wasm)运行于浏览器之中。兼容几乎所有浏览器，可以运行在PC、手机、微信中，无需额外安装插件。Jessibuca功能：1、支持解码H.264视频(Baseline, Main, High Profile全支持，支持解码B帧视频)2、支持解码H.265视频（flv id == 12）3
Jessibuca 插件播放直播流视频
02-26
Jessibuca 插件播放直播流视频
vue3+ts使用jessibuca播放视频流
no_one_but_you的博客
03-26 1250
vue3+ts使用jessibuca播放直播，视频流
vue3 使用Jessibuca播放器，实现视频流播放直播
zhao_LuYuan的博客
09-19 4004
本文介绍了如何在Vue中集成并使用 Jessibuca插件进行.flv格式的视频流播放，涉及文件引入、DOM结构创建、播放器实例化以及相关方法的实现，以实现在不同设备和平台上的流畅视频播放。
vue3中使用jessibuca.js实现视频播放
m0_65745337的博客
01-28 2792
播放失败
vue3项目jessibuca用法
02-27
### 如何在 Vue3 项目中使用 jessibuca 库 #### 准备工作 为了能够在 Vue3 中成功集成并使用 jessibuca 实现直播流播放，需先完成一些准备工作。这包括但不限于从官方渠道获取最新版本的相关文件，并将其放置于项目的 `public` 或者 `static` 文件夹内[^5]。 #### 安装依赖项 确保已经安装了必要的 npm 包以支持 Webpack 对静态资源的处理能力。如果尚未执行此操作，则可以通过命令行工具运行如下指令： ```bash npm install --save-dev url-loader file-loader ``` #### 配置 webpack (如有必要) 对于某些特定场景下的配置调整可能需要修改 webpack 的默认设置以便更好地兼容所使用的库。不过，在大多数情况下，默认配置已足够满足需求。 #### 创建组件 创建一个新的 Vue 组件用于展示视频内容。在此过程中可以参照已有案例来进行编码实践。以下是简化版代码片段示例： ```html <template> <div id="player"></div> </template> <script setup> import { onMounted } from 'vue' // 假设将 js 和 css 放到了 public/js 和 public/css 下面 const initPlayer = () => { const playerDiv = document.getElementById('player') window.JSSEBUCALoader({ autoplay: true, width: '100%', height: 'auto', flashUrl: '/path/to/flash.swf', // 如果不适用 Flash 可忽略此项 streamName: 'your_stream_name_here', container: playerDiv }) } onMounted(() => { initPlayer() }) </script> <style scoped src="/css/jessibuca.css"> /* 导入样式 */ </style> ``` 上述代码展示了如何通过 JavaScript 动态加载 jessibuca 并初始化播放器实例。注意路径 `/path/to/flash.swf` 和 `'your_stream_name_here'` 需要替换为实际值；而 CSS 则直接作为外部链接被引入到当前页面中[^4]。 #### 测试与调试 最后一步就是测试整个流程是否正常运作。启动本地服务器查看效果，若有任何异常情况发生，请查阅浏览器控制台日志信息进行排查解决。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值