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

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进行分布式测试 ...

随机推荐

HDFS主要节点解说(一)节点功能
1 HDFS体系结构简单介绍及优缺点 1.1体系结构简单介绍 HDFS是一个主/从(Mater/Slave)体系结构.从终于用户的角度来看,它就像传统的文件系统一样,能够通过文件夹路径对文件运行CR ...
re中match和search的不同
re.match与re.search的区别:re.match只匹配字符串的开始,如果字符串开始不符合正则表达式,则匹配失败,函数返回None:而re.search匹配整个字符串,直到找到一个匹配.
NSDate 问题
类型比特数有效数字数值范围 float 32 6-7 -3.4*10(-38)-3.4*10(38) double 64 15-16 -1.7*10(-308)-1.7*10(308) long ...
node.js 学习03
node.js学习03 解决浏览器接收服务端信息之后乱码的问题: 服务器通过设置http响应报文头,告诉浏览器使用相应的编码来解析网页. res.setHeader('Content','text/ ...
STM32在程序运行过程中关闭定时器重新打开后定时器不工作的问题
问题:数码管显示程序放在定时TIM2中断函数里面扫描,想要实现在关闭某一功能的时候数码管不显示. 刚开始的想法是开关关闭,关闭定时器时钟:开关打开,打开定时器时钟:(但实验证明再次打开开关时定时器2却 ...
Netty（一）：初识Netty
Netty是什么? Netty是由JBOSS提供的一个java开源框架. Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序. 封装了JDK底 ...
Atitit atiMail atiDns新特性 v2 q39
Atitit atiMail atiDns新特性 v2 q39 V1 实现了基础的功能 V2 重构..使用自然语言的方式 c.According_to_the_domain_name(&quo ...
MVC | 微软自带的Ajax请求
@Ajax.BegForm( ) 用来生成异步表单 Home控制器 using System; using System.Collections.Generic; using System.Linq ...
如何理解HTTP协议的“无连接，无状态”特点
是一个属于应用层的面向对象的协议,HTTP 协议一共有五大特点:1.支持客户/服务器模式;2.简单快速;3.灵活;4.无连接;5.无状态. 无连接无连接的含义是限制每次连接只处理一个请求.服务器处理 ...
js中级系列三：前端性能优化
原文链接:http://www.cnblogs.com/xxcanghai/p/5205998.html 链接:http://www.zhihu.com/question/21658448/answe ...

EasyPlayer.js网页全终端播放器安装使用文档