EasyPlayer.js

集 rtmp, hls, flv, websocket 于一身的网页直播/点播播放器, 使用简单, 功能强大

属性(Property)

  • video-url 视频流地址 String default ‘’
  • video-title 视频右上角显示的标题 String default ‘’
  • poster 视频封面图片 String default ‘’
  • autoplay 自动播放 Boolean default true
  • loop 是否循环播放 Boolean default false
  • live 是否直播, 标识要不要显示进度条 Boolean default false
  • alt 视频流地址没有指定情况下, 视频所在区域显示的文字, 相当于 html img 标签的 alt 属性 String default ‘无信号’
  • muted 是否静音 Boolean default false
  • aspect 视频显示区域的宽高比 String default ‘16:9’
  • loading 指示加载状态, 支持 sync 修饰符
  • fluent 流畅模式, Boolean default true
  • stretch 是否拉伸, Boolean default false
  • timeout m3u8 加载超时(秒) Number default 20
  • show-custom-button 是否在工具栏显示自定义按钮(极速/流畅, 拉伸/标准), Boolean default true

方法(Medthod)

  • getCurrentTime 获取当前播放时间进度, 同步返回播放时间进度数据
  • snap 外部 API 方式获取快照, 快照获取成功后, 触发 snapOutside Event

事件(Event)

  • message 触发通知消息, 参数: { type: ‘’, message: ‘’}
  • ended 播放结束, 参数: 无
  • timeupdate 进度更新, 参数: 当前时间进度
  • pause 暂停, 参数: 当前时间进度
  • play 播放, 参数: 当前时间进度,
  • snapOutside 外部快照回调, 参数: 快照 Base64 数据
  • snapInside 内部快照回调, 由控制栏快照按钮触发, 参数: 快照 Base64 数据

安装(Install)

  • 安装

npm install easy-player

  • 在 Vue 中使用

copy node_modules/easy-player/dist/component/easy-player.swf 到 www 根目录

copy node_modules/easy-player/dist/component/crossdomain.xml 到 www 根目录

copy node_modules/easy-player/dist/component/easy-player-lib.min.js 到 www 根目录

以上 copy 操作通过 webpack 完成, 编辑你的 webpack.config.js


......
// copy js lib and swf files to dist dir
new CopyWebpackPlugin([
{ from: 'node_modules/easy-player/dist/component/crossdomain.xml'},
{ from: 'node_modules/easy-player/dist/component/easy-player.swf'},
{ from: 'node_modules/easy-player/dist/component/easy-player-lib.min.js', to: 'js/'}
]),
......

在 html 中引用 www 根目录 easy-player-lib.min.js

编辑你的 Vue 组件


...... import EasyPlayer from 'easy-player' ......
components: {
EasyPlayer
}
...... <EasyPlayer :videoUrl="videoUrl" fluent autoplay live stretch></EasyPlayer>
  • 脱离 Vue 使用

copy node_modules/easy-player/dist/element/easy-player.swf 到 www 根目录

copy node_modules/easy-player/dist/element/crossdomain.xml 到 www 根目录

copy node_modules/easy-player/dist/element/easy-player-element.min.js 到 www 根目录

在 html 中引用 www 根目录 easy-player-element.min.js

HTML 集成 Demo

<!DOCTYPE HTML>
<html>
<head>
<title>easy-player</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">
<body>
<easy-player video-url="rtmp://live.hkstv.hk.lxdns.com/live/hks" 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>
<easy-player video-url="ws://192.168.1.65:3000/play?stream=rtsp://username:password@192.168.1.64:5504/Streaming/Channels/102"></easy-player>
<script type="text/javascript" src="easy-player-element.min.js"></script></body>
</html>

获取更多信息

邮件:support@easydarwin.org

EasyDarwin开源流媒体服务器:www.EasyDarwin.org

EasyDSS商用流媒体解决方案:www.EasyDSS.com

EasyNVR无插件直播方案:www.EasyNVR.com

Copyright © EasyDarwin Team 2012-2019

EasyPlayer.js网页全终端播放器安装使用文档的更多相关文章

  1. EasyPlayer开源流媒体移动端播放器推出RTSP-RTMP-HTTP-HLS全功能Pro版

    EasyPlayerPro介绍 Android EasyPlayerPro专业版全功能播放器,是由EasyDarwin开源团队维护的一款支持RTSP.RTMP.HTTP.HLS多种流媒体协议的播放器版 ...

  2. (jsp/html)网页上嵌入播放器(常用播放器代码整理) http://www.jb51.net/article/37267.htm

    网页上嵌入播放器,只要在HTML上添加以上代码就OK了,下面整理了一些常用的播放器代码,总有一款适合你,感兴趣的朋友可以参考下哈,希望对你有所帮助   这个其实很简单,只要在HTML上添加以上代码就O ...

  3. 推荐美丽的flash网页MP3音乐播放器

    文章来源:PHP开发学习门户 地址:http://www.phpthinking.com/archives/491 在网页制作中.假设想在网页中插入mp3音乐来增添网页的互动感,提升用户体验度,这个时 ...

  4. EasyGBS国标流媒体服务器GB28181国标方案安装使用文档

    EasyGBS - GB28181 国标方案安装使用文档 下载 安装包下载,正式使用需商业授权, 功能一致 在线演示 在线API 架构图 EasySIPCMS SIP 中心信令服务, 单节点, 自带一 ...

  5. S01-晓亮的电脑软件安装过程文档 腾讯QQ 595076941 2019年10月

    S01-晓亮的电脑软件安装过程文档 腾讯QQ 595076941 2019年10月 本文档的创建作者的腾讯QQ聊天号码是 595076941 S02-电脑软件安装过程中不要随意关闭窗口除非必需关闭窗口 ...

  6. CentOS6.4下使用默认的文档查看器打开PDF文档乱码的解决方案

     最近在CentOS6.4下使用其默认的文档查看器打开PDF文档时出现乱码的方块,有两种方法可以解决.    方法一:修改/etc/fonts/conf.d/49-sansserif.conf文件,如 ...

  7. 电脑软件安装过程文档.BA

    MD 01-打印并阅读-电脑软件安装过程文档.BAT-即此批处理脚本文档MD 02-阅读-电脑软件安装经验教训文档.DOCX-MD 03-制作-杏雨梨云USB维护系统2019中秋版之国庆更新-可启动U ...

  8. Xcode离线安装帮助文档

    Xcode离线安装帮助文档   1.在线查看帮助文件:Xcode下查看帮助文件,菜单Help-Developer Documentation在右上角搜索框中即可检索,但速度很慢,在线查看. 2.下载帮 ...

  9. Jmeter+Badboy安装使用文档

                  Jmeter+Badboy安装使用文档       目录   1.jmeter安装    1 2.Jmeter基础使用    3 3. 使用Jmeter进行分布式测试    ...

随机推荐

  1. 微信小程序 - 文字走马灯

    转载于csdn maid_04,总之多谢了!节省了不少时间呢 最近在做一个类似uu跑腿的项目,时间也特别紧,搞完以后再继续贴地图代码(高德.腾讯) 以下代码拷贝即可用,拿走谢谢上面的人吧(~.~) w ...

  2. android 完美的tabhost 切换多activity布局

    TabHost在很多应用都会使用到,有时候在TabHost添加的Tab中设置view不能满足需求,因为在view中添加如PreferenceActivity相当困难. 之前在一个应用中需要实现使用Ta ...

  3. 51单片机 | 1-Wire总线及应用实例

    ———————————————————————————————————————————— 1-Wire总线 - - - - - - - - - - - - - - - - - - - - - - - ...

  4. C++常考面试题汇总(持续更新中)

    c++面试题 一 用简洁的语言描述 c++ 在 c 语言的基础上开发的一种面向对象编程的语言: 应用广泛: 支持多种编程范式,面向对象编程,泛型编程,和过程化编程:广泛应用于系统开发,引擎开发:支持类 ...

  5. (转)jquery实现图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 《深入PHP:面向对象、模式与实践》(一)

    第1章  PHP:设计与管理 本章主要介绍了本书有哪些内容. 第2章  PHP与对象 本章总结了PHP面向对象特性的发展过程,逐步介绍对象的概念. PHP/FI:支持变量.关联数组和函数.没有对象. ...

  7. PNP管理器简析--基于ReactOS0.33

    CSDN上转悠了一圈发现关于PNP管理的文章不多.那就由我献个丑,记录自己对PNP管理器的看法. pnp管理器被描写叙述为向内核和应用程序提供关于设备拔插的通知,凭感觉,pnp管理器应该是个线程函数等 ...

  8. python的threading和multiprocessing模块初探

    转载于:http://blog.csdn.net/zhaozhi406/article/details/8137670

  9. vue 组件1

    注意:vue组件中的data必须为一个函数,要不vue就会停止工作. 构成组件 组件意味着协同工作,通常父子组件会是这样的关系:组件A在它的模板中使用了组件B,他们之间必然需要相互通信:父组件需要给子 ...

  10. hive分桶 与保存数据的方式

    创建分桶的表 create table t_buck(id int ,name string) clustered by (id ) sorted by (id) into 4 buckets  ; ...