首页 > 其他分享 >如何在uniapp框架中集成H.265流媒体视频播放器EasyPlayer.js?

如何在uniapp框架中集成H.265流媒体视频播放器EasyPlayer.js?

时间:2023-09-18 17:16:25浏览次数:28  
标签:播放器 uniapp H.265 流媒体 js EasyPlayer 播放

H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器,可支持多种流媒体协议播放,可支持H.264与H.265编码格式,性能稳定、播放流畅,能支持WebSocket-FLV、HTTP-FLV,HLS(m3u8)、WebRTC等格式的视频流,并且已实现网页端实时录像、在iOS上实现低延时直播等功能。

安防视频监控EasyPlayer是一个支持多框架集成的播放器,我们在前期的文章中也介绍了如何在React框架下集成流媒体视频播放器EasyPlayer.js,感兴趣的用户可以翻阅我们往期的文章进行了解。

有用户反馈,在uniapp框架下集成EasyPlayer.js播放器,但是集成的过程中会报一个“video.js,flv.js找不到”的错。

那么今天我们来详细介绍下在uniapp中如何集成流媒体播放器EasyPlayer.js,具体步骤如下:

1)首先,在HBuider X下创建一个项目;

2)在npm上下载easyplayer.js,下载地址如下:

https://www.npmjs.com/package/@easydarwin/easyplayer,找到对应的文件;

3)将上面的这两个文件复制放到用户项目的static目录下,并在App.vue中如下图一样引入播放器;

4)然后就可以在项目里使用EasyPlayer.js播放器了。

5)如果视频流是H.265,那么还需要将EasyPlayer.element.min.js中的/EasyPlayer.wasm替换为static/EasyPlayer.wasm,如下所示:

6)这样在播放H.265格式的视频流时,就可以正常访问到EasyPlayer.wasm,并且能正常播放了。

流媒体播放器EasyPlayer是我们流媒体组件系列中关注度较高的产品,经过多年的发展和迭代,目前已经有多个应用版本,包括RTSP版、RTMP版、Pro版,以及js版,其中js版本作为网页播放器,受到了用户的广泛使用。在功能上,EasyPlayer支持直播、点播、录像、快照截图、MP4 播放、多屏播放、倍数播放、全屏播放等特性,具备较高的可用性和稳定性。感兴趣的用户可以前去下载测试。

标签:播放器,uniapp,H.265,流媒体,js,EasyPlayer,播放
From: https://www.cnblogs.com/TSINGSEE/p/17712434.html

相关文章

  • uniapp中使用vue-i18n实现多语言
    一安装vue-i18nnpmivue-i18n@6二添加相关语言配置 如en.json:{"locale.auto":"System","locale.en":"English","locale.zh-hans":"简体中文","locale.zh-hant":"繁体中文","......
  • uniapp项目实践总结(十六)自定义下拉刷新组件
    导语:在日常的开发过程中,我们经常遇到下拉刷新的场景,很方便的刷新游览的内容,在此我也实现了一个下拉刷新的自定义组件。目录准备工作原理分析组件实现实战演练内置刷新案例展示准备工作在components新建一个q-pull文件夹,并新建一个q-pull.vue的组件;按照前面文章所说......
  • uniApp 打包H5工程
    打开这个项目,选择“发行”-->"网站-PCWeb或手机H5(仅适用于uniapp)(H)";页面中间出现一个弹窗,直接点击绿色的按钮“发行”;在底部的控制台显示项目编译成功,编译好路径在控制台的里面;打开本地路径,把h5文件夹复制出来就是打包好的h5项目,后台把这个包上传到服务器就完成了......
  • 【uniapp】【微信小程序】wxml-to-canvas
    真是搞吐了,研究了整整两天,困死我了 本来使用生成二维码插件好好的,插件页也支持导出二维码图片,可是领导说要带上文件的名称,那就涉及html转图片了,当然也可以改二维码插件的源码,不过源码做了混淆,看晕了,放弃了。试了将微信的原生插件wxml-to-canvas引入uniapp项目,最后捣鼓了好久没......
  • springboot vue uniapp 小说电子书阅读小程序APP源码
    开发环境及工具:大等于jdk1.8,大于mysql5.5,idea(eclipse),nodejs,vscode(webstorm),HBuilderX技术说明:springbootmybatisvueelementuiuniapp代码注释齐全,没有多余代码,适合学习(毕设),二次开发,包含论文技术相关文档。功能介绍:用户端:登录注册首页显示搜索小说,轮播图,最新发布小说(可带推荐算......
  • uniapp+app开发使用muiplayer播放m3u8视频流的不成熟方法
    问题使用uniapp开发手机端app,有一个页面是一个m3u8格式的视频列表,如果使用原版的video标签播放会因为层级最高问题不能滑动被覆盖。方案使用iframe内嵌本地页面(为什么不用webview?webview在模拟器可以显示在真机上就显示不出来,同时手机端的webview的层级是最高的)。代码<......
  • uniapp-文件上传
    一使用uni.uploadFile 二具体实现案例<template><viewclass="container">主页<button@click="getInfo()">测试接口</button></view><view><uni-sectiontitle="选择图片&qu......
  • uniapp VUE-H5页面微信公众号内使用微信JSAPI支付
    注意看本文主要讲解uniapp打包成h5页面并部署在公众号时使用JSAPI的微信支付问题前期准备工作.首先要有一个开通商户注册的公众号,我们需要他的appid;.其次要开通商户公众号的公众号支付的功能并添加域名,开通完成后就可以基本开始我们的开发了既然是jsapi开发自然是要引入的......
  • uniapp-net core后台-实现认证
    一在program.cs中添加cookie认证builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme).AddCookie(options=>{options.Cookie.Name="auth";options.ExpireTimeSpan=TimeSpan.FromDays(1);options.Sli......
  • uniapp项目实践总结(十五)使用websocket实现简易聊天室
    导语:在一些社交软件中,经常可以看到各种聊天室的界面,接下来就总结一下聊天室的原理个实现方法,最后做一个简易的聊天室,包括登录/登出、加入/离开房间、发送接收聊天消息等功能。目录准备工作原理分析组件实现实战演练服务端搭建案例展示准备工作在pages/index文件夹下......