@easydarwin/easyplayer

rtmp, hls, flv and websocket player

Usage no npm install needed!

<script type="module">
  import easydarwinEasyplayer from 'https://cdn.skypack.dev/@easydarwin/easyplayer';
</script>

README

EasyPlayer.js

简介

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

功能说明

支持 MP4 播放
支持 m3u8/HLS 播放;
支持 HTTP-FLV/WS-FLV 播放;
支持直播和点播播放;
支持播放器快照截图;
支持点播多清晰度播放;
支持全屏或比例显示;
自带的 flash 支持极速和流畅模式;
自带的 flash 支持 HTTP-FLV 播放;
自动检测 IE 浏览器兼容播放;
支持重连播放；

HTML 集成示例

使用方式
普通集成

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>

vue集成

  npm install @easydarwin/easyplayer --save

Vue 集成调用

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

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

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>

效果演示

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	销毁播放器