easyplayer-v2

v5.1.2

Published

3 months ago

hls, flv and websocket player h265

Downloads

0High
0Medium
0Low

wginit

easy-player hls rtmp flv

EasyPlayer.js

简介

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

优化

1、EasyPlayer.wasm 文件存放设置相对目录，不用服务器根目录； 2、saveLocalSnapshot 方法增加回调函数，返回快照的 blob 或 base64 数据

功能说明

[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 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

效果演示

[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 | | decode-type | 解码类型仅支持 flv (soft: 强制使用 wasm 模式） | String | auto | | 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 | - | | has-audio | 是否渲染音频（音频有问题,请设置成 false）仅支持 flv | Boolean | true | | video-title | 视频右上角显示的标题 | String | - | | recordMaxFileSize | 录像文件大小(MB) | Number | 200 |

事件回调

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

Vue 方法

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

开放平台

EasyPlayer 群 1：544917793(已满) EasyPlayer 群 2：161592199 EasyRTMP: 58725484

青犀TSINGSEE

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme