magic-easyplayer

v1.1.0

Published

10 months ago

by @easydarwin/easyplayer custom easyplayer for magic company

Downloads

0High
0Medium
0Low

yang5831

easyplayer flv mls

简介

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流不支持视频录像

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

简介