easyplayer-my

v3.3.9

Published

4 years ago

rtmp, hls, flv and websocket player

0High
0Medium
0Low

shiziburuchengzi

easy-player hls rtmp flv

EasyPlayer.js

简介

EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）、WS视频直播与视频点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持mse、wasm等多种解码方式，支持Windows、Linux、Android、iOS全平台终端的H5播放器，使用简单, 功能强大。

功能说明

[x] 支持 MP4 播放
[x] 支持 m3u8/HLS 播放;
[x] 支持 HTTP-FLV/WS-FLV 播放;
[x] 支持 H265编码视频;
[x] 支持 RTMP 播放;
[x] 支持直播和点播播放;
[x] 支持播放器快照截图;
[x] 支持点播多清晰度播放;
[x] 支持全屏或比例显示;
[x] 自带的 flash 支持极速和流畅模式;
[x] 自带的 flash 支持 HTTP-FLV 播放;
[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/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>

##效果演示

[x] npm集成

......

<EasyPlayer
  :videoUrl="videoUrl"
  :aspect="aspect"
  live
  @message="$message"
  :fluent="fluent"
  :autoplay="autoplay"
  stretch
></EasyPlayer>

...... ...... import EasyPlayer from '@easydarwin/easyplayer'; ......
components: { EasyPlayer }

源码演示：github-demo

配置属性

| 参数 | 说明 | 类型 | 默认值 | | ------------------ | ------------------------------------------------ | -------------------------- | ------ | | video-url | 视频地址 | String | - | | video-title | 视频右上角显示的标题 | String | - | | poster | 视频封面图片 | String | - | | auto-play | 自动播放 | Boolean | true | | live | 是否直播, 标识要不要显示进度条 | Boolean | true | | speed | 是否显示倍速播放按钮。注意：当live为true时，此属性不生效 |Boolean | true | | loop | 是否轮播。 |Boolean | false | | alt | 视频流地址没有指定情况下, 视频所在区域显示的文字 | String | 无信号 | | muted | 是否静音 | Boolean | false | | aspect | 视频显示区域的宽高比 | String | 16:9 | | isaspect | 视频显示区域是否强制宽高比 | Boolean | true | | loading | 指示加载状态, 支持 sync 修饰符 | String | - | | fluent | 流畅模式 | Boolean | true | | timeout | 加载超时(秒) | Number | 20 | | stretch | 是否不同分辨率强制铺满窗口 | Boolean | false | | show-custom-button | 是否在工具栏显示自定义按钮(极速/流畅, 拉伸/标准) | Boolean | true | | isresolution | 是否在播放 m3u8 时显示多清晰度选择 | Boolean | false | | isresolution | 供选择的清晰度 "yh,fhd,hd,sd", yh:原始分辨率 | fhd:超清，hd:高清，sd:标清 | - | | resolutiondefault | 默认播放的清晰度 | String | hd | | decodeWasm | 强制H265解码(支持:HLS/FLV/WS) | Boolean | false |

HTTP-FLV 播放相关属性

注意：此属性只在播放flv格式的流时生效。

| 属性 | 说明 | 类型 | 默认值 | | -------- | -------------------------------------- | ------- | ------------------ | | hasaudio | 是否有音频，传递该属性可以加快启播速度 | Boolean | 默认不配置自动判断 | | hasvideo | 是否有视频，传递该属性可以加快启播速度 | Boolean | 默认不配置自动判断 |

事件方法

| 方法名 | 说明 | 参数 | | ---------- | ------------ | --------------------- | | video-url | 触发通知消息 | type: '', message: '' | | ended | 播放结束 | - | | timeupdate | 进度更新 | 当前时间进度 | | pause | 暂停 | 当前时间进度 | | play | 播放 | 当前时间进度 | | update:loading | 加载状态回调 |- | | message | 播放器回调信息 |- |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme