第一次写博客哎，不知道写点什么，回头一想写点最近遇到的前端方面的东西，以后可能重点还是在java后端，感谢你长期关注。
言归正传关于记录播放时长的问题： Flowplayer 自身没有带记录真实播放的时长的方法，所以要自己实现，网上有很多根据定时累加进行记录这也是一种方法，但是我觉得这种方法我也喜欢，所以自我实现了一种。 我是记录的场景是播放的时长和暂停、播放和拖动以及播放结束的动作进行监听，下面看看我的代码
实现代码：
1、开发环境
2、开发源码
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="author" content="odenpan“>
<!-- A minimal Flowplayer setup to get you started -->
<!--
include flowplayer JavaScript file that does
Flash embedding and provides the Flowplayer API.
-->
<script type="text/javascript" src="../flowplayer-3.2.13.min.js"></script>
<!-- some minimal styling, can be removed -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- page title -->
<title>Minimal Flowplayer setup</title>
</head><body>
<!-- widescreen container, 560x240 (clip dimensions) * 1.15, center splash -->
<div id="wowza" style="width:644px;height:450px;margin:0 auto;text-align:center">
</div>
<div id="test"></div>
<div id="test1"></div>
<script>
$f("wowza", "../flowplayer-3.2.18.swf", {
clip: {autoBuffering: true,
url: 'rtmp://10.10.154.1:80/video/L2x5YXBwL2FwcC91cGxvYWQvdmlkZW8vMTg5NDUvMTg3MjEvNDAvMDBlNzI2MTg3NTMxNGQ3NWI3OWI2Njc0NjMwZWU3NDgubXA0.mp4',
scaling: 'fit',
provider: 'hddn'
},
plugins: {
// rtmp插件
hddn: {
url: "../flowplayer.rtmp-3.2.13.swf",
// 需播放的地址
netConnectionUrl: 'rtmp://10.10.154.1:80/video/'
}
},
canvas: {
backgroundGradient: 'none'
}
});
//api = $(".flowplayer:eq(1)").data("flowplayer");
var elem = document.getElementById("wowza");
api = flowplayer(elem);
api.onSeek(function(event){
setStartTime();
document.getElementById("test1").innerHTML="位移："+lastSecond+"--"+api.getTime();
//alert();
});
var startTime=0;//开始计时的时间
var totalTime=0;//总时间
var lastSecond=0;//用于位移的上一时间
api.onBeforeSeek(function(event){
countTime();
lastSecond=api.getTime() ;
});
api.onStart(function(event){
//开始事件
totalTime=0;
setStartTime();
//api.seek(60.000);
//alert(api.getTime());
});
api.onResume(function(event){
//继续事件
countTime();
//alert(api.getTime());
});
api.onPause(function(event){
//暂停事件
countTime();
//alert(api.getTime());
});
api.onFinish (function(event){
countTime();
//完成事件
//alert(api.getTime());
});
/**
*计算时长
*/
function countTime(){
var resoult=(api.getTime()-startTime);
if(resoult<0) resoult=0;
totalTime+=resoult;
setStartTime();
document.getElementById("test").innerHTML="共用时长："+totalTime;
}
function setStartTime(){
startTime=api.getTime();
}
setInterval(function(){
countTime();
//10秒自动记录一次
},10000);
</script>
</body></html>
3、使用的时候需要注意
RTMP的URL是需要更改的。
相关推荐
下面我们将深入探讨如何使用Flowplayer播放RTMP格式的视频以及这个"rtmp_sample_player_flowplayer.zip"压缩包的内容。 首先，RTMP协议由Adobe Systems开发，主要适用于Flash Player和HTML5中不直接支持的实时流...
5. **性能优化**：考虑到网络环境的差异，rtmp_sample_player_flowplayer可能会包含一些优化策略，比如自动调整视频质量以适应不同的网络条件，或者使用HLS（HTTP Live Streaming）作为备选协议，以应对RTMP不支持的...
发布者需要知道服务器的RTMP地址（通常以rtmp://开头）和目标流路径。 6. **播放器配置**: 在Web播放器的配置中，需要指定RTMP流的URL，格式通常是rtmp://server-address/appname/streamkey。这里的"appname"是...
本示例是关于如何在H5环境下实现RTMP协议的视频播放，通过源码学习，可以深入理解这一技术的实现细节。 1. **H5多媒体元素：** H5中的`<video>`标签是实现视频播放的基础，它可以内联播放视频，支持多种视频格式，...
Flowplayer是一款广受欢迎的开源Flash视频播放器，尤其擅长处理FLV和RTMP格式的流媒体内容。在本文中，我们将深入探讨Flowplayer的核心特性、技术背景以及如何使用这款强大的在线播放器。 首先，让我们来了解一下...
- HTML文件：提供用户界面，让用户输入RTMP流地址并开始播放。 - CSS文件：可能包含样式表，用于美化用户界面。 - 可能还有示例RTMP流地址或其他配置文件，帮助用户快速测试。 为了使用这个压缩包，你需要将RTMP...
RTMP视频流播放器是能够解析并播放通过RTMP协议传输的视频内容的软件。下面我们将详细探讨RTMP协议及其在视频流播放器中的应用。 1. RTMP协议简介： - RTMP协议是基于TCP的，用于在客户端和服务器之间实时传输音...
本篇将深入探讨RTMP协议的基本原理，FlowPlayer的特点以及如何使用FlowPlayer实现RTMP流媒体播放。 一、RTMP协议解析 RTMP协议由Adobe公司开发，主要用于实时数据传输，尤其是音频、视频和数据的实时传输。该协议...
Flowplayer是一款知名的开源JavaScript视频播放器，用于在网页上嵌入和播放视频内容。这个"flowplayer3.2.8(去水印).zip"压缩包包含的是Flowplayer的3.2.8版本，该版本已经去除了默认的LOGO和水印，适合那些希望在...
如果我们要在Flowplayer中播放由Red5服务器提供的录像，我们需要确保Flowplayer支持RTMP协议，并正确配置流的URL。例如： ```javascript flowplayer("#player", { rtmp: { server: "rtmp://your.red5.server....
RTMP（Real-Time Messaging Protocol，实时消息传输协议）是一种广泛应用于网络流媒体传输的协议，由Adobe Systems开发，主要用于在互联网上进行音频、视频的实时传输。基于RTMP协议的Flash流媒体网页播放器，是过去...
本文将深入探讨如何将海康摄像头的RTSP视频流转换为RTMP并使用FLV播放器进行播放，以及解决前端延迟问题。 首先，RTSP是一种应用层协议，用于控制多媒体数据的传输，它允许用户通过网络实时播放音频和视频。海康...
9. **许可证信息**：`LICENSE.md`文件通常包含Flowplayer的开源许可信息，确保合法使用并遵循开源协议。 10. **自定义插件**：Flowplayer拥有强大的插件系统，允许开发人员扩展其功能，如添加分享按钮、社交登录、...
Flowplayer是一款广泛使用的开源JavaScript视频播放器，它允许开发者在网页上轻松集成视频播放功能。这个压缩包可能包含了Flowplayer的源代码、配置文件、示例或者相关文档，便于我们了解和定制播放器。 Flowplayer...
5. **测试播放**：保存并打开HTML文件，如果一切配置正确，Flowplayer应该能成功加载并播放RTMP视频流。 需要注意的是，RTMP协议需要服务器支持，如Adobe Flash Media Server或Open Source alternatives like Red5...
这为用户提供了灵活的选择，可以根据网络状况和视频内容选择最合适的播放方式。 2. **易集成性**：Flowplayer的设计使得它可以轻松地嵌入到HTML页面中，无论是在简单的静态网页还是复杂的动态网页（如PHP、ASP驱动...
RTMP（Real-Time Messaging Protocol）是Adobe开发的一种实时传输协议，常用于在线视频流媒体服务，而FlowPlayer是一款开源的HTML5视频播放器，广泛应用于网页端视频播放。 【描述】：由于提供的描述信息简洁，我们...
在实际应用中，服务器端通常会部署如Adobe Flash Media Server或Red5这样的RTMP服务器，而客户端则使用支持RTMP协议的播放器来接收并播放流媒体内容。 接下来，Flowplay是一个强大的视频播放器框架，专为高性能、...
Flowplayer以其简洁的API、高度可定制性和对多种视频格式的支持而受到开发者的欢迎。这个压缩包文件可能包含了该库的核心JavaScript文件和其他相关资源。 Flowplayer的主要特点和功能包括： 1. **HTML5支持**：...