easyplayer使用

一个打工仔的笔记

已于 2023-11-20 15:00:53 修改

阅读量1.7k

点赞数

文章标签：前端 javascript 开发语言

于 2023-08-22 14:28:53 首次发布

本文链接：https://blog.csdn.net/web_notes/article/details/132427190

版权

1.安装插件

npm install @easydarwin/easyplayer --save

2.配置js文件
copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf 到静态文件根目录public/下
copy node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml 到静态文件根目录public/下
copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js 到静态文件根目录public/下

3.vue使用

import EasyPlayer from "@easydarwin/easyplayer";

<EasyPlayer :videoUrl="videoUrl" live autoplay stretch ref="easyPlayer" class="video-js"></EasyPlayer>

直接给videoUrl赋值就可以了

文档属性参考https://gitcode.net/mirrors/tsingsee/EasyPlayer.js/-/tree/master/demo

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一个打工仔的笔记

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

EasyPlayer.js 在VUE中使用

05-22

EasyPlayer.js 在VUE中使用 https://blog.csdn.net/u012848709/article/details/106291133

vue2使用easyplayer

weixin_44585148的博客

05-15

2175

vue2使用easyplayer播放流视频

参与评论您还未登录，请先登录后发表或查看评论

EasyPlayer.js开发之跨语言调用的说明

最新发布

EasyNTS的博客

01-06

301

通过EasyPlayer_Open打开一个流或者本地文件，打开以后即可播放，不需要调用EasyPlayer_Play方法，调用完成后，注意，比如拉网络流的时候，由于Open函数是非阻塞而立即返回的，所以，播放过程可能尚未初始化完成，从而获取流的信息可能获取不到，正确的做法是在线程或者计时器里面轮询获取。目前定义慢放范围为2倍和4倍，快放范围为2，4，8，16，64倍，超过这个范围则无明显反应或者意义。Open完成后，我们可以对一些参数进行设置，比如设置OSD和图片叠加，显示模式，音量大小等。

分享EasyPlayer的使用经验

xu_xu_0924的博客

05-08

4437

适合播放h265视频的播放器

通过EasyPlayer在浏览器中实现H.264视频流播放

weixin_69556696的博客

06-15

1797

通过EasyPlayer在浏览器中实现H.264视频流播放

TSINGSEE青犀视频H265网页播放器EasyPlayerPro-Win如何通过配置文件实现自动播放等功能？

TSINGSEE青犀视频官方技术博客

12-14

1372

由于TSINGSEE青犀视频H265播放器EasyPlayer系列项目的开放性，关于EasyPlayer的开发一直是很多用户乐此不疲的事，可广泛应用于流媒体客户端、互联网直播、在线教育、IPTV、赛事直播、本地视频文件播放等项目中，稳定、高效、可靠。当然了，EasyPlayerPro-Win播放器也能够实现自动全屏、自动播放的功能。该功能让EasyPlayerPro直接在项目中直接使用，不用再做二次开发。关于播放器的显示样式问题，TSINGSEE青犀视频研发团队在设计的时候就有考虑过，因此留下了

EasyPlayer.js在使用vue3中使用

风花一世月

08-09

1166

npm install @easydarwin/easyplayer --save 把 node_modules/@easydarwin/easyplayer/dist/element目录下的文件复制到public内 index.html <script type="text/javascript" src="/js/EasyPlayer-element.min.js">&l...

vue项目中使用EasyPlayer.js播放视频

weixin_56039168的博客

03-15

2680

项目中最近需要接摄像头的监控画面，一开始用了市面上一些别的插件，发现有些视频能播放，有些不能播放，最后发现是摄像头码流的问题，很多插件都无法支持h265的编码格式。但是现在市面上稍微新点的摄像头，都是h265的编码格式。千万不要下载6.0之后的版本，容易产生很多你意想不到的问题。将这两个文件复制于public根目录下，不然会报错。二、复制文件于public的跟目录下。三、使用（直接上代码）

React 项目中如何使用 easyPlayer-pro.js

赵花花的博客

08-02

1852

React 项目中如何使用视频播放插件 easyPlayer.js

EasyPlayer RTSP 播放器

11-11

EasyPlayer RTSP播放器是一款专为测试和播放RTSP（Real Time Streaming Protocol）视频流而设计的应用程序。在IT行业中，尤其是与视频监控、网络流媒体或者多媒体开发相关的领域，RTSP是一个重要的协议，用于控制...

EasyPlayer接口说明文档1

08-04

《EasyPlayer接口说明文档1》 EasyPlayer是一款针对RTSP直播流的高性能、低延迟的播放器库，它提供了丰富的API接口，用于实现RTSP流的实时采集、解码显示、录像、快照以及OSD叠加等功能。以下是主要接口的详细说明...

EasyPlayer-element.min.js

07-21

使用EasyPlay制作web播放器的时候使用。

easyplayer2013

11-21

宇通灯饰控制系统软件2013版本，可以控制多种IC芯片。

EasyPlayer.js-legacy.zip 支持rtmp流播放

02-07

EasyPlayer.js-legacy.zip 支持rtmp流播放

Easyplayer实现H5页面无插件播放视频，动态实时生成封面。

05-15

在实际应用中，`Easyplayer`的使用非常简单。开发者只需在HTML中引入`Easyplayer`的JS文件，然后通过JavaScript配置播放器的参数，如视频源、控制条样式等。`Easyplayer`提供了一套简洁的API，允许开发者进行高级...

android easyplayer截屏,EasyWasmPlayer H265播放器是如何实现视频截图功能的？

weixin_35660371的博客

05-30

596

在我们做视频开发的过程中，会遇到不少需求，其中视频截图就是一个比较常见的需求，因此TSINGSEE青犀视频不管是在设计视频平台还是视频播放器的时候，我们都会在原有开发的基础上对视频截图进行一些功能拓展。TSINGSEE青犀视频开发的H265播放器截图功能主要利用canvas实现，用canvas的绘画能力画出视频某一帧的视频画面，获得到图像之后转换成base64图像，再利用a标签实现自动保存到本地。...

uniapp项目h5中使用EasyPlayer

2303_76798990的博客

07-11

1567

EasyPlayer流媒体播放器，可支持多种流媒体协议播放，可支持H.264与H.265编码格式，性能稳定、播放流畅，能支持WebSocket-FLV、HTTP-FLV，HLS（m3u8）、WebRTC等格式的视频流，并且已实现网页端实时录像、在iOS上实现低延时直播等功能。uniapp使用EasyPlayer 提示Uncaught ReferenceError: videojs is not defined问题。

【技术教程】H.265编码视频播放器EasyPlayerPro for Windows使用FFMPEG编码过程说明

TSINGSEE青犀视频官方技术博客

10-14

731

EasyPlayerPro for Windows是基于FFmpeg进行开发的全功能播放器，EasyPlayerPro分为三大模块：打开模块，读取流数据模块，解码模块和渲染模块，具体过程可参考《EasyPlayerPro(Windows)开发之框架讲解》。本章我们主要讲解FFMPEG编码过程，该内容对于EasyPlayer播放器系列项目的后期修改及调整具备重要作用。 FFmpeg是一款音视频编解码库，提供了多种媒体格式的封装和解封装，包括音视频编码、多种协议的流媒体、多种色彩格式转换、多种采样率转

探索EasyPlayer.js：强大的HTML5视频播放器解决方案

gitblog_00097的博客

03-25

1452

探索EasyPlayer.js：强大的HTML5视频播放器解决方案去发现同类优质开源项目:https://gitcode.com/ 是一个轻量级、高度可定制的HTML5视频播放器，它为开发者提供了一套简洁的API和丰富的配置选项，以满足各种复杂的视频播放需求。这篇文章将带你深入了解这个项目的技术特性，应用场景及其优势。项目简介 EasyPlayer.js 基于原生的HTML5 <vide...

EasyPlayer怎么使用

01-01

### 如何使用 EasyPlayer 播放器 #### 安装与引入为了在项目中使用 `EasyPlayer`，需先安装特定版本的库。对于 Vue2 项目中的 H265 视频流播放遇到的问题，建议采用 `3.3.12` 版本来规避加载问题[^2]。 ```bash npm install @easydarwin/easyplayer@3.3.12 --save ``` 除了通过 npm 安装外，在静态资源文件夹 (`static`) 中还需放置必要的 SWF 文件和其他依赖项，如 `crossdomain.xml`, `EasyPlayer-lib.min.js` 等，并确保这些文件能够被正确引用到 HTML 页面里： ```html <script src="/static/jquery.min.js"></script> <script src="/static/EasyPlayer-lib.min.js"></script> ``` 此外，应将 `node_modules/easy-player/dist/component/easy-player.swf` 复制至 Web 应用程序根目录下以便于 Flash 组件正常工作[^3]。 #### 初始化播放器实例创建一个新的 JavaScript 函数用于初始化并启动播放器对象，通常是在页面载入完成后执行此操作。下面是一个简单的例子展示如何配置基本参数以及开始播放媒体内容： ```javascript function initPlayer() { var player = new easyPlayer({ id: 'player', // DOM容器ID url: "your_video_stream_url", // 流地址URL autoplay: true, // 自动播放开关 controls: true, // 显示控件条 width: 800, height: 600 }); } window.onload = function () {initPlayer();}; ``` 这段代码会尝试在一个具有指定 ID 的 div 元素内部渲染出一个宽高分别为 800px 和 600px 的视频播放窗口，并允许用户交互控制播放过程（例如调整音量、前进后退等）[^1]。 #### 高级特性利用 `EasyPlayer` 不仅仅局限于基础的播放功能；它同样支持更复杂的场景需求，像抓拍截图保存为图像文件、管理录制任务或是实现跨平台兼容性优化等方面的功能扩展[^4]。更多高级特性的具体实施细节可以参阅官方提供的 API 参考手册获得指导和支持。