1.1.0 • Published 10 months ago
magic-easyplayer v1.1.0
简介
magic-easyplayer是EasyPlayer.js(v5.0.7)基础上的更改，所以EasyPlayer.js支持的基本都支持，新增功能是可以定制播放器控制台，且只支持vue开发。
EasyPlayer.js集播放http-flv, hls, websocket 于一身的H5视频直播/视频点播播放器, 使用简单, 功能强大。
功能说明
*支持定制控制器；
*新增H265视频窗口适配v1.1.0；
支持 MP4 播放；
支持 m3u8/HLS 播放;
支持 HTTP-FLV/WS-FLV 播放;
支持直播和点播播放;
支持播放器快照截图;
支持点播多清晰度播放;
支持全屏或比例显示;
自动检测 IE 浏览器兼容播放;
支持重连播放；
集成示例
- 使用方式
- vue集成
npm install magic-easyplayer --save- Vue 集成调用
copy node_modules/magic-easyplayer/dist/crossdomain.xml 到 静态文件 根目录
copy node_modules/magic-easyplayer/dist/EasyPlayer-lib.min.js 到 静态文件 根目录
注意： 没有调用会出现无法加载对应插件的报错
在 html 中引用 dist/EasyPlayer-lib.min.js
H.265
copy node_modules/magic-easyplayer/dist/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>vue组件
<template>
<easy-player
live
muted
autoplay
:video-url="camera.videoSrc"
style="width: 100%;height: 200px"
@error="restartPlayer"
/>
</template>
<script>
import EasyPlayer from 'magic-easyplayer';
export default {
components: { EasyPlayer }
}
</script>配置属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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，当设置为false时不会再解码音频 | Boolean | true |
| video-title | 视频右上角显示的标题 | String | - |
| recordMaxFileSize | 录像文件大小(MB) | Number | 200 |
事件回调
| 方法名 | 说明 | 参数 |
|---|---|---|
| play | 播放事件 | |
| pause | 暂时事件 | |
| error | 播放异常 | |
| ended | 播放结束或直播断流 | |
| timeupdate | 当前播放时间回调 | currentTime |
| *internet-speed | 当前下载速度 | speed下载速度 |
Vue方法
通过获取组件ref，进行调用api。例this.$refs.easyPlayer.initPlayer();| 方法名 | 说明 | 参数 | 描述 |
|---|---|---|---|
| initPlayer | 初始化播放器 | ||
| destroyPlayer | 销毁播放器 | ||
| switchVideo | 播放开关 | ||
| switchAudio | 静音开关 | ||
| fullscreen | 全屏 | ||
| exitFullscreen | 退出全屏 | ||
| changeStretch | 视频拉伸模式 | ||
| snapshot | 保存快照 | ||
| switchRecording | 录像开关 | 第一次调用时为开始录像，第二次为结束录像，两次间隔需在三秒以上，不支持MP4流录像 |
定制控制器
直接将easy-player的控制台设置隐藏，然后传入自定义的控制组件作为default slot即可。
<template>
<easy-player
live
muted
autoplay
ref="easyPlayerRef"
:controls="playerConfig.controls"
:video-url="playerConfig.url"
@internet-speed="onSpeed"
>
<!-- 此处只是一个示例组件，组件内容样式和事件名用户自定 -->
<custom-contrl
:speed="speed"
@onSwitchVideo="onSwitchVideo"
@onSwitchAudio="onSwitchAudio"
@onFullscreen="onFullscreen"
@onChangeStretch="onChangeStretch"
@onSnapshot="onSnapshot"
@onSwitchRecording="onSwitchRecording"
></custom-contrl>
</easy-player>
</template>
<script>
import EasyPlayer from 'magic-easyplayer';
import customContrl from 'your component path';
export default {
components: { EasyPlayer,customContrl }
data: function(){
return {
playerConfig: {
url: '...'
controls: false,// 隐藏默认控制器
},
speed: '',
}
},
methods:{
onSpeed(speed){
this.speed = speed
},
onSwitchVideo(){
const playerInstance = this.$refs.easyPlayerRef
playerInstance.switchVideo()
},
onSwitchAudio(){
const playerInstance = this.$refs.easyPlayerRef
playerInstance.switchAudio()
},
onFullscreen(){
const playerInstance = this.$refs.easyPlayerRef
playerInstance.fullscreen()
},
onChangeStretch(){
const playerInstance = this.$refs.easyPlayerRef
playerInstance.changeStretch()
},
onSnapshot(){
const playerInstance = this.$refs.easyPlayerRef
playerInstance.snapshot()
},
onSwitchRecording(){
const playerInstance = this.$refs.easyPlayerRef
playerInstance.onSwitchRecording()
}
}
}
</script>常见问题
FLV :
1、flv协议播放需视频流有音频，无音频需增加has-audio:false，否则无法进行播放
2、flv流在ios播放通过wasm转码，会造成音频解码失败，无法播放音频，在ios使用easyPlayer建议使用hls协议HLS :
1、hls流为h.265格式时，播放器拉流正常，但是播放器黑屏问题：此问题是因为在hls流前几次生成的ts文件时，ts文件为空，easyPlayer无法识别流是h.264还是h.265，
从而没有进行wasm软解码，造成黑屏，正常这种在第二次拉流时正常播放
解决方案：
在内核服务端检测m3u8文件是否为空，为空则返回状态码为404，从而播放器会继续拉流，从而正常播放器
使用两个播放器，一个进行拉流，当拉流成功时使用第二个播放器去覆盖第一个拉流播放器，并销毁第一个播放器MP4 : 1、MP4流不支持视频录像