记录一次vue使用jessibuca的视频插件

这篇具有很好参考价值的文章主要介绍了记录一次vue使用jessibuca的视频插件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言:Jessibuca 是一款开源的纯 H5 直播流播放器,通过 Emscripten 将音视频解码库编译成 Js(ams.js/wasm) 运行于浏览器之中。兼容几乎所有浏览器,可以运行在 PC、手机、微信中,无需额外安装插件

附上中文文档:http://jessibuca.monibuca.com/player.html

使用步骤:

1.安装(这个插件会自动在html插入index标签,所以可以在代码中直接全局使用jessibuca变量,无需引入)  

npm install vue-cli-plugin-jessibuca -D

# use yarn

yarn add vue-cli-plugin-jessibuca -D

2.去官网找到这三个文件,要是最新的,不然可能会报错(点击最新源码,它会自动下载压缩包,我们只需要找到这三个文件把他们放到我们项目的public下面即可使用)

记录一次vue使用jessibuca的视频插件,音视频,javascript,开发语言,前端,vue.js

3.具体使用(具体的参数配置还是要根据项目的需求看文档,我这里只做最简单的视频播放)

// 初始化视频函数
function init() {
  if (jessibuca) {
    jessibuca = new Jessibuca({
      container: document.getElementById("container"),//jessibuca需要容器
      videoBuffer: 0.2, // 缓存时长
      isResize: false,
      loadingText: "疯狂加载中...",
      useMSE: true,
      useWCS: true,
      debug: true,
      background: "@/assets/icons/svg/no-video.svg",
      supportDblclickFullscreen: true,
      showBandwidth: true, // 显示网速
      operateBtns: {
        fullscreen: true,
        screenshot: true,
        play: true,
        audio: true,
      },
      forceNoOffscreen: true,
      isNotMute: false,
      timeout: 10,
    });
  }
}

4.到这里基本就快完成啦  最后就是播放 文章来源地址https://www.toymoban.com/news/detail-535289.html

//调用初始化函数
 init();
//记得写播放的代码哦
 jessibuca.play(视频地址 + "&&&.flv");//视频地址后面需要加上&&&.flv后缀,不然播放不出来哦

到了这里,关于记录一次vue使用jessibuca的视频插件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Linphone3.5.2 ARM RV1109音视频对讲开发记录

    说明 这是一份事后记录,主要记录的几个核心关键点,有可能很多细节没有记上,主要是方便后面自己再找回来! 版本 3.5.2 一些原因选的是这样一个旧的版本! 新的开发最好选新一些的版本吧, 像 4.5, 4.2, 3.8 这一类的! 因为之前没有开发过Linphone的应用,所以对整个框架不了

    2024年02月07日
    浏览(31)
  • 全志F1C100s主线linux入坑记录 (6)音视频播放(视频播放软解)

    百度网站 (1)下载安装声卡补丁 参考挖坑网大神提供的声音驱动以及声音卡驱动补丁文件下载文件下载 全志F1C100s声卡补丁 解压文件打上补丁 (2)配置声卡 修改设备树文件添加声卡节点 内核配置 (3)linux内核编译烧录 可以看到声卡已经挂载了 (4)使用声卡 安装alsa-u

    2024年02月07日
    浏览(52)
  • [音视频处理] FFmpeg使用指北1-视频解码

    本文将详细介绍如何使用ffmpeg 4.4在C++中解码多种格式的媒体文件,这些媒体文件可以是视频、视频流、图片,或是桌面截屏或USB摄像头的实时图片。解码文件后,还将每帧图片转换为OpenCV的Mat格式以供后续使用。 目录 1 基于ffmpeg的媒体文件解码 1.1 简介 1.2 详细代码 2 ffmpeg函

    2024年02月07日
    浏览(63)
  • 【FFmpeg】音视频录制 ① ( 查询系统中 ffmpeg 可录制的音视频输入设备 | 使用 ffmpeg 命令录制音视频数据 | 录制视频数据命令 |录制音频数据| 同时录制音频和视频数据命令 )

    在 Windows 系统中 , 使用 ffmpeg 命令 录制 音视频 , 需要先获取 系统的 音视频设备 信息 , 录制 音视频 本质上是从 系统音视频设备 中获取数据 ; 执行 命令 , 可以获取 系统中 ffmpeg 可用的 DirectShow 音视频输入设备 ; 命令参数解析 : -list_devices true : 列出所有 ffmpeg 的 指定类型的可

    2024年04月25日
    浏览(89)
  • 音视频-SDL的简单使用

    SDL(Simple DirectMedia Layer)是一套开放源代码的跨平台多媒体开发库,使用C语言写成。SDL提供了数种控制图像、声音、输出入的函数,让开发者只要用相同或是相似的代码就可以开发出跨多个平台(Linux、Windows、Mac OS X等)的应用软件。目前SDL多用于开发游戏、模拟器、媒体播

    2024年01月19日
    浏览(43)
  • 使用Qt进行音视频播放

      Qt对音视频的播放和控制,相机拍照,收音机等多媒体应用提供了强大的支持。Qt5使用了全新的Qt Multimedia模块来实现多媒体应用,而原来Qt4中用于实现多媒体功能的Phonon模块已经被移除。   新的Qt Multimedia模块提供了丰富的接口,使读者可以轻松地使用平台的多媒体功

    2024年02月03日
    浏览(42)
  • 使用Python采集某网站视频,实现音视频自动合成!

      开发环境 模块的使用 采集下破站视频数据 通过开发者工具进行抓包分析,分析破站视频数据的来源。 开发者工具的使用 打开方式: 鼠标右键点击检查选择Network F12 ctrl + shift + i 想要开发者工具中有数据加载, 需要 刷新网页。 通过元素(Element)面板,我们能查看到想抓取

    2024年02月06日
    浏览(61)
  • iOS使用AVCaptureSession实现音视频采集

    AVCaptureSession配置采集行为并协调从输入设备到采集输出的数据流。要执行实时音视频采集,需要实例化采集会话并添加适当的输入和输出。 AVCaptureSession:管理输入输出音视频流 AVCaptureDevice:相机硬件的接口,用于控制硬件特性,诸如镜头的位置(前后摄像头)、曝光、闪光灯

    2024年02月06日
    浏览(44)
  • WebRTC音视频通话-WebRTC本地视频通话使用ossrs服务搭建

    iOS开发-ossrs服务WebRTC本地视频通话服务搭建 之前开发中使用到了ossrs,这里记录一下ossrs支持的WebRTC本地服务搭建。 ossrs是什么呢? SRS(Simple Realtime Server)是一个简单高效的实时视频服务器,支持RTMP、WebRTC、HLS、HTTP-FLV、SRT等多种实时流媒体协议。 官网地址:https://ossrs.net/lt

    2024年02月12日
    浏览(43)
  • gstreamer中使用webrtc实现音视频对讲

    gstreamer官方源代码中有一个基于webrtc插件实现音视频通话的开源项目,下面介绍在Ubuntu系统中如何搭建环境并使用。 这里省略gstreamer安装,直接安装使用webrtcbin插件使用的相关库,参考官网。系统版本建议高于ubuntu18.04。 首先安装如下相关依赖库。 gstreamer项目编译官方建议

    2024年04月11日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包