首页 > 其他分享 >网页直播/点播播放器EasyPlayer.js如何在Vue3中使用?

网页直播/点播播放器EasyPlayer.js如何在Vue3中使用?

时间:2024-12-19 15:31:34浏览次数:4  
标签:播放器 js EasyPlayer Vue3 easyplayer H5

近来很多用户对何为Vue3产生了疑问,其实Vue3就是一个用于构建用户界面的渐进式JavaScript框架。Vue3于2020年发布带来了全新的Composition API、改进的性能、TypeScript支持和更好的处理大型应用程序的能力。Vue3在保留了Vue2的易用性的同时,提供了更强大的功能,为开发者在实现复杂应用时提供了更多的灵活性。

那么用户在实际应用时,应该如何在Vue3中使用EasyPlayer呢?

1、首先通过npm引入easyplayer.js:

npm install @easydarwin/easyplayer

2、然后找到项目node_modules中的easydarwin,如下:

3、逐级点击easyplayer->dist->element。

4、找到EasyPlayer-element.min.js、EasyPlayer.wasm,将这两个文件复制到项目的根目录下。

5、在项目的入口文件index.html中,通过script标签引入EasyPlayer-element.min.js,如下图:

6、完成以上操作后,就可以在vue组件中直接使用EasyPlayer播放器了。

注意:

若出现libDecoder.wasm的文件报404错误,提示找不到libDecoder.wasm文件,一定要排查是否存放在项目的根目录。

随着流媒体技术的提高,它受到的关注度也越来越多了。EasyPlayer.js播放器是一款功能强大的H5播放器,支持多种视频协议,包括HTTP、HTTP-FLV、HLS(m3u8)、WS、WEBRTC、FMP4等,兼容视频直播与点播功能。同时,它支持多种音视频编码格式,如H.264、H.265等,该播放器适用于Windows、Linux、Android和iOS等全平台终端,操作简便,性能卓越。

随着流媒体技术的迅速发展,H5流媒体播放器已成为现代网络视频播放的重要工具。其中,EasyPlayer.js视频流媒体播放器作为一款功能强大的H5播放器,凭借其全面的协议支持、多种解码方式以及跨平台兼容性,赢得了广泛的关注和应用。

标签:播放器,js,EasyPlayer,Vue3,easyplayer,H5
From: https://www.cnblogs.com/easyplayer/p/18617354

相关文章

  • Js 获取token 过期时间
    functiongetJwtExpiration(token){try{constbase64Url=token.split('.')[1];//提取payload部分constbase64=base64Url.replace(/-/g,'+').replace(/_/g,'/');//Base64Url转换为Base64constjsonPa......
  • JSP Session
    HTTP是无状态协议,这意味着每次客户端检索网页时,都要单独打开一个服务器连接,因此服务器不会记录下先前客户端请求的任何信息。有三种方法来维持客户端与服务器的会话:Cookies网络服务器可以指定一个唯一的sessionID作为cookie来代表每个客户端,用来识别这个客户端接下来的请......
  • 给我2分钟,保证教会你在Vue3中实现一个定高的虚拟列表
    前言虚拟列表对于大部分一线开发同学来说是一点都不陌生的东西了,有的同学是直接使用第三方组件。但是面试时如果你简历上面写了虚拟列表,却给面试官说是通过三方组件实现的,此时空气可能都凝固了。所以这篇文章欧阳将会教你2分钟内实现一个定高的虚拟列表,至于不定高的虚拟列表下一......
  • vue3 wspt 插件的使用 wsplayer无插件开发包封装
    基于大华插件:H5播放器开发套件(wsplayer无插件开发包)V1.2.9使用方法npmiwsptwspt使用说明1.找到node_modules目录中wspt文件夹,将static文件夹、jquery.min.js、palyer.css、PlayerControl.js、WSPlayer.js文件复制到项目public目录下。public|--jquery.min.js......
  • JackJson的@JsonAutoDetect注解
    1、@JsonAutoDetect(作用在类上):自动检测fieldVisibility:字段的可见级别;getterVisibility:getter方法的可见级别;setterVisibility:setter方法的可见级别。ANY:任何级别的字段都可以自动识别NONE:任何字段都不可以自动识别NON_PRIVATE:非private修饰的字段可以自动识别PROTECTED_OR......
  • pdfjs 报错提示Failed to load module script
    参考文章:pdfjs报错提示Failedtoloadmodulescript[JavaScript]MIMEtype异常在服务器好不容易配好nginx转发,jar包,静态资源等,访问网站一切ok,结果打开pdf时,无法预览:F12看了下,接口返回正常啊,说明接口没问题,接着看控制台,oh,问题在这:Failedtoloadmodulescript:Expecte......
  • JS中把其它类型转成字符串的方法及规则是什么?
    在JavaScript中,有多种方法可以将其他类型转换为字符串。以下是一些常见的方法和规则:使用toString()方法:几乎所有的JavaScript对象都继承了toString()方法,该方法返回一个表示该对象的字符串。对于原始类型(如Number和Boolean),此方法会返回原始值的文本表示形式。对于数组和对象,默......
  • JS中把其它类型转成数字的方法及规则是什么?
    在JavaScript中,可以使用多种方式将其他类型转换为数字。以下是一些常见的方法和规则:Number()函数:Number()函数可以用来将任何类型的数据转换为数字。其规则如下:如果参数是布尔值,true转换为1,false转换为0。如果参数是数字,则返回该数字(无转换)。如果参数是null,返回0......
  • JS中把其它类型转成布尔的方法及规则是什么?
    在JavaScript中,可以使用Boolean()函数将其他类型转换为布尔值。此外,JavaScript中的类型转换也遵循一定的自动转换规则,特别是在条件判断等场景中。使用Boolean()函数Boolean()函数可以将任何类型的值转换为布尔值。以下是一些示例:console.log(Boolean(1));//trueconsol......
  • ThreeJs-07操控物体实现家具编辑器
    本章节实现效果,通过gui快速添加场景,家具,并且可以快速设置家具实现一个编辑器效果一.基础设置与物体添加列表用之前做过的一个案例来改首先不要这个模型,然后换个背景颜色,并且添加一个网格辅助器1.1添加场景先往事件对象里面添加一个函数,到时候点击就会调用这个函数,而这个......