magic-easyplayer

简介

magic-easyplayer是EasyPlayer.js(v5.0.7)基础上的更改，所以EasyPlayer.js支持的基本都支持，新增功能是可以定制播放器控制台，且只支持vue开发。

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

功能说明

[x] *支持定制控制器；
[x] *新增H265视频窗口适配[v1.1.0]；
[x] 支持 MP4 播放；
[x] 支持 m3u8/HLS 播放;
[x] 支持 HTTP-FLV/WS-FLV 播放;
[x] 支持直播和点播播放;
[x] 支持播放器快照截图;
[x] 支持点播多清晰度播放;
[x] 支持全屏或比例显示;
[x] 自动检测 IE 浏览器兼容播放;
[x] 支持重连播放；

集成示例

使用方式
[x] 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流不支持视频录像

magic-easyplayer

简介

功能说明

集成示例

H.265

demo

vue组件

配置属性

事件回调

Vue方法

定制控制器

常见问题

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

magic-easyplayer

简介

功能说明

集成示例

H.265

demo

vue组件

配置属性

事件回调

Vue方法

定制控制器

常见问题

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads