• https://blog.csdn.net/weixin_45906632/article/details/128560735
  • https://www.tsingsee.com/easyplayer/
  • https://www.npmjs.com/package/@easydarwin/easyplayer
  • https://blog.csdn.net/weixin_45906632/article/details/115031633
  • https://blog.csdn.net/weixin_45906632/article/details/128560735
  • https://blog.csdn.net/weixin_53791978/article/details/135323209

HTML 集成示例

  • 使用方式
  • [x] 普通集成

copy dist/element/EasyPlayer-element.min.js 到 www 根目录

在 html 中引用 dist/element/EasyPlayer-element.min.js

<!DOCTYPE html>
<html>
<head>
  <title>easyplayer</title>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta
    content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    name="viewport"
  />
  <script type="text/javascript" src="EasyPlayer-element.min.js"></script>
</head>
<body>
<easy-player
  video-url="rtmp://live.hkstv.hk.lxdns.com/live/hks2"
  live="true"
  stretch="true"
></easy-player>
<easy-player
  video-url="http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8"
  live="false"
  stretch="true"
></easy-player>
<easy-player
  video-url="http://live.hkstv.hk.lxdns.com/flv/hks.flv"
  live="true"
  stretch="true"
></easy-player>
</body>
</html>
  • [x] vue集成
  npm install @easydarwin/easyplayer --save
  • Vue 集成调用

copy node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml 到 静态文件 根目录

copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js 到 静态文件 根目录

注意: 没有调用会出现无法加载对应插件的报错

在 html 中引用 dist/component/EasyPlayer-lib.min.js

H.265

copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.wasm 到 静态文件 根目录

demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  <link rel="icon" href="<%= BASE_URL %>favicon.ico"/>
  <title>EasyPlayer-demo</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script src="./EasyPlayer-lib.min.js"></script>
</head>
<body>
<noscript>
  <strong
  >We're sorry but easynvr-token doesn't work properly without JavaScript
    enabled. Please enable it to continue.</strong
  >
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

更多使用demo 详情见 node_modules/@easydarwin/easyplayer/dist/element/index.html

效果演示

imgopen in new window

  • [x] npm集成
......

<easy-player
  live
  muted
  autoplay
  :video-url="camera.videoSrc"
  style="width: 100%;height: 200px"
  @error="restartPlayer"
/>

...... ...... import EasyPlayer from '@easydarwin/easyplayer'; ......
components: { EasyPlayer }

配置属性

参数说明类型默认值
alt视频流地址没有指定情况下, 视频所在区域显示的文字String无信号
aspect视频显示区域的宽高比String16:9
autoplay自动播放Booleantrue
currentTime设置当前播放时间Number0
decode-type解码类型 仅支持flv (soft: 强制使用wasm模式)Stringauto
easyStretch是否不同分辨率强制铺满窗口Booleanfalse
live是否直播, 标识要不要显示进度条Booleantrue
loop是否轮播。Booleanfalse
muted是否静音Booleantrue
poster视频封面图片String-
reconnection视频出错时自动重连Booleanfalse
resolution仅支持hls流; 供选择的清晰度 fhd:超清,hd:高清,sd:标清String"yh,fhd,hd,sd"
resolutionDefault仅支持hls流String"hd"
video-url视频地址String-
has-audio是否渲染音频(音频有问题,请设置成false)仅支持flvBooleantrue
video-title视频右上角显示的标题String-
recordMaxFileSize录像文件大小(MB)Number200

事件回调

方法名说明参数
play播放事件
pause暂时事件
error播放异常
ended播放结束或直播断流
timeupdate当前播放时间回调currentTime

Vue方法

方法名说明参数
initPlayer初始化播放器
destroyPlayer销毁播放器
switchVideo播放开关
switchAudio静音开关
fullscreen全屏
exitFullscreen退出全屏
changeStretch视频拉伸模式
snapshot保存快照
switchRecording录像开关

更多流媒体音视频资源

EasyDarwin开源流媒体服务器:www.EasyDarwin.orgopen in new window

EasyDSS高性能互联网直播服务:www.EasyDSS.comopen in new window

EasyNVR安防视频可视化服务:www.EasyNVR.comopen in new window

EasyNVS视频综合管理平台:www.EasyNVS.comopen in new window

EasyNTS云组网:www.EasyNTS.comopen in new window

EasyGBS国标GB/T28181服务器:www.EasyGBS.com< /a>open in new window

EasyRTS应急指挥平台:www.EasyRTS.comopen in new window

TSINGSEE青犀开放平台:open.TSINGSEE.comopen in new window