@easydarwin/easyplayer

hls, flv and websocket player

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@easydarwin/easyplayer
5.0.011 days ago4 years agoMinified + gzip package size for @easydarwin/easyplayer in KB

Readme

EasyPlayer.js

简介

集播放http-flv, hls, websocket 于一身的H5视频直播/视频点播播放器, 使用简单, 功能强大;

功能说明

  • x 支持 MP4 播放

  • x 支持 m3u8/HLS 播放;

  • x 支持 HTTP-FLV/WS-FLV 播放;

  • x 支持直播和点播播放;

  • x 支持播放器快照截图;

  • x 支持点播多清晰度播放;

  • x 支持全屏或比例显示;

  • x 自动检测 IE 浏览器兼容播放;

  • x 支持重连播放;

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 nodemodules/@easydarwin/easyplayer/dist/component/crossdomain.xml 到 静态文件 根目录
copy node
modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js 到 静态文件 根目录
注意: 没有调用会出现无法加载对应插件的报错
在 html 中引用 dist/component/EasyPlayer-lib.min.js

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>

效果演示


  • 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 | 视频显示区域的宽高比 | String | 16:9 | | autoplay | 自动播放 | Boolean | true | | currentTime | 设置当前播放时间 | Number | 0 | | easyStretch | 是否不同分辨率强制铺满窗口 | Boolean | false | | live | 是否直播, 标识要不要显示进度条 | Boolean | true | | loop | 是否轮播。 |Boolean | false | | muted | 是否静音 | Boolean | true | | poster | 视频封面图片 | String | - | | reconnection | 视频出错时自动重连 | Boolean | false | | resolution | 仅支持hls流; 供选择的清晰度 fhd:超清,hd:高清,sd:标清 | String | "yh,fhd,hd,sd" | | resolutionDefault | 仅支持hls流 | String | "hd" | | video-url | 视频地址 | String | - | | video-title | 视频右上角显示的标题 | String | - |

事件回调

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

Vue方法

| 方法名 | 说明 | 参数 | | ---------- | ------------ | ---------------------| | initPlayer | 初始化播放器 | | | destroyPlayer | 销毁播放器 | |

更多流媒体音视频资源

EasyDarwin开源流媒体服务器:www.EasyDarwin.org
EasyDSS高性能互联网直播服务:www.EasyDSS.com
EasyNVR安防视频可视化服务:www.EasyNVR.com
EasyNVS视频综合管理平台:www.EasyNVS.com
EasyNTS云组网:www.EasyNTS.com
EasyGBS国标GB/T28181服务器:www.EasyGBS.com
EasyRTS应急指挥平台:www.EasyRTS.com
TSINGSEE青犀开放平台:open.TSINGSEE.com
Copyright © www.TSINGSEE.com Team 2012-2021

开放平台

EasyPlayer群1:544917793(已满)
EasyPlayer群2:161592199
EasyRTMP: 58725484
青犀TSINGSEE