EasyPlayer.js网页全终端播放器安装使用文档
EasyPlayer.js
集 rtmp, hls, flv, websocket 于一身的
网页直播/点播
播放器, 使用简单, 功能强大
属性(Property)
video-url
视频流地址 String default ‘’video-title
视频右上角显示的标题 String default ‘’poster
视频封面图片 String default ‘’autoplay
自动播放 Boolean default trueloop
是否循环播放 Boolean default falselive
是否直播, 标识要不要显示进度条 Boolean default falsealt
视频流地址没有指定情况下, 视频所在区域显示的文字, 相当于 html img 标签的 alt 属性 String default ‘无信号’muted
是否静音 Boolean default falseaspect
视频显示区域的宽高比 String default ‘16:9’loading
指示加载状态, 支持 sync 修饰符fluent
流畅模式, Boolean default truestretch
是否拉伸, Boolean default falsetimeout
m3u8 加载超时(秒) Number default 20show-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>
获取更多信息
EasyDarwin开源流媒体服务器:www.EasyDarwin.org
EasyDSS商用流媒体解决方案:www.EasyDSS.com
EasyNVR无插件直播方案:www.EasyNVR.com
Copyright © EasyDarwin Team 2012-2019
EasyPlayer.js网页全终端播放器安装使用文档的更多相关文章
- EasyPlayer开源流媒体移动端播放器推出RTSP-RTMP-HTTP-HLS全功能Pro版
EasyPlayerPro介绍 Android EasyPlayerPro专业版全功能播放器,是由EasyDarwin开源团队维护的一款支持RTSP.RTMP.HTTP.HLS多种流媒体协议的播放器版 ...
- (jsp/html)网页上嵌入播放器(常用播放器代码整理) http://www.jb51.net/article/37267.htm
网页上嵌入播放器,只要在HTML上添加以上代码就OK了,下面整理了一些常用的播放器代码,总有一款适合你,感兴趣的朋友可以参考下哈,希望对你有所帮助 这个其实很简单,只要在HTML上添加以上代码就O ...
- 推荐美丽的flash网页MP3音乐播放器
文章来源:PHP开发学习门户 地址:http://www.phpthinking.com/archives/491 在网页制作中.假设想在网页中插入mp3音乐来增添网页的互动感,提升用户体验度,这个时 ...
- EasyGBS国标流媒体服务器GB28181国标方案安装使用文档
EasyGBS - GB28181 国标方案安装使用文档 下载 安装包下载,正式使用需商业授权, 功能一致 在线演示 在线API 架构图 EasySIPCMS SIP 中心信令服务, 单节点, 自带一 ...
- S01-晓亮的电脑软件安装过程文档 腾讯QQ 595076941 2019年10月
S01-晓亮的电脑软件安装过程文档 腾讯QQ 595076941 2019年10月 本文档的创建作者的腾讯QQ聊天号码是 595076941 S02-电脑软件安装过程中不要随意关闭窗口除非必需关闭窗口 ...
- CentOS6.4下使用默认的文档查看器打开PDF文档乱码的解决方案
最近在CentOS6.4下使用其默认的文档查看器打开PDF文档时出现乱码的方块,有两种方法可以解决. 方法一:修改/etc/fonts/conf.d/49-sansserif.conf文件,如 ...
- 电脑软件安装过程文档.BA
MD 01-打印并阅读-电脑软件安装过程文档.BAT-即此批处理脚本文档MD 02-阅读-电脑软件安装经验教训文档.DOCX-MD 03-制作-杏雨梨云USB维护系统2019中秋版之国庆更新-可启动U ...
- Xcode离线安装帮助文档
Xcode离线安装帮助文档 1.在线查看帮助文件:Xcode下查看帮助文件,菜单Help-Developer Documentation在右上角搜索框中即可检索,但速度很慢,在线查看. 2.下载帮 ...
- Jmeter+Badboy安装使用文档
Jmeter+Badboy安装使用文档 目录 1.jmeter安装 1 2.Jmeter基础使用 3 3. 使用Jmeter进行分布式测试 ...
随机推荐
- 微信小程序 - 文字走马灯
转载于csdn maid_04,总之多谢了!节省了不少时间呢 最近在做一个类似uu跑腿的项目,时间也特别紧,搞完以后再继续贴地图代码(高德.腾讯) 以下代码拷贝即可用,拿走谢谢上面的人吧(~.~) w ...
- android 完美的tabhost 切换多activity布局
TabHost在很多应用都会使用到,有时候在TabHost添加的Tab中设置view不能满足需求,因为在view中添加如PreferenceActivity相当困难. 之前在一个应用中需要实现使用Ta ...
- 51单片机 | 1-Wire总线及应用实例
———————————————————————————————————————————— 1-Wire总线 - - - - - - - - - - - - - - - - - - - - - - - ...
- C++常考面试题汇总(持续更新中)
c++面试题 一 用简洁的语言描述 c++ 在 c 语言的基础上开发的一种面向对象编程的语言: 应用广泛: 支持多种编程范式,面向对象编程,泛型编程,和过程化编程:广泛应用于系统开发,引擎开发:支持类 ...
- (转)jquery实现图片轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 《深入PHP:面向对象、模式与实践》(一)
第1章 PHP:设计与管理 本章主要介绍了本书有哪些内容. 第2章 PHP与对象 本章总结了PHP面向对象特性的发展过程,逐步介绍对象的概念. PHP/FI:支持变量.关联数组和函数.没有对象. ...
- PNP管理器简析--基于ReactOS0.33
CSDN上转悠了一圈发现关于PNP管理的文章不多.那就由我献个丑,记录自己对PNP管理器的看法. pnp管理器被描写叙述为向内核和应用程序提供关于设备拔插的通知,凭感觉,pnp管理器应该是个线程函数等 ...
- python的threading和multiprocessing模块初探
转载于:http://blog.csdn.net/zhaozhi406/article/details/8137670
- vue 组件1
注意:vue组件中的data必须为一个函数,要不vue就会停止工作. 构成组件 组件意味着协同工作,通常父子组件会是这样的关系:组件A在它的模板中使用了组件B,他们之间必然需要相互通信:父组件需要给子 ...
- hive分桶 与保存数据的方式
创建分桶的表 create table t_buck(id int ,name string) clustered by (id ) sorted by (id) into 4 buckets ; ...