到http://flowplayer.rog下载flowplayer，在download页面下载的flowplayer只有flowplayer-3.2.7.swf和flowplayer.controls-3.2.5.swf文件，然后到document下载javascript api的js文件flowplayer-3.2.6.min.js。
有了以上三个文件，就可以完成播放录像的功能了。
flowplayer播放代码：
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<html>
<head>
<title>视频录像</title>
<script type="text/javaScript" src="js/flowplayer-3.1.4.min.js">var abc=1234;</script>
</head>
<body>
<center>
<div id="flowplayer" style="display:block;width:325px;height:250px;"></div>
<input type="button" value="退30秒" onclick="seek(-30);" class="tbbutton" style="width:45px;height:22px" />
<input type="button" value="退10秒" onclick="seek(-10);" class="tbbutton" style="width:45px;height:22px" />
<input type="button" value="退5秒" onclick="seek(-5);" class="tbbutton" style="width:45px;height:22px" />
<span style="margin-left:8px;"/>
<input type="button" value="进5秒" onclick="seek(5);" class="tbbutton" style="width:45px;height:22px" />
<input type="button" value="进10秒" onclick="seek(10);" class="tbbutton" style="width:45px;height:22px" />
<input type="button" value="进30秒" onclick="seek(30);" class="tbbutton" style="width:45px;height:22px" />
<br/>
<br/>
</center>
</body>
<script type="text/javaScript">
var filePath2 = "avatar.flv"; －－red5项目TestRed5中streams里的flv文件
var player = $f("flowplayer", "flowplayer-3.1.3.swf", {
/*clip: {
url: filePath2,
provider: 'influxis',
autoPlay: true,
accelerated: true,
autoBuffering: false
},*/
plugins: {
influxis: {
url: 'flowplayer.rtmp-3.1.2.swf',
netConnectionUrl: 'rtmp://192.168.61.113/TestRed5' －－使用rtmp即使用red5提供的播放服务
}
}
});
var clip0 = {url:filePath2,provider: 'influxis',autoPlay: true,accelerated: true,autoBuffering: false};
player.onStart (
function(){
player.seek(${position});
}
);
player.play(clip0);
function seek(s) {
var t = player.getTime() + 1 + s;
t = t < 0 ? 0 : t;
player.seek(t);
}
seek("${position}");
/*切换录像和录音的播放
var playMode = 0;
function changePlayMode() {
if (playMode == 0) {
playMode = 1;
document.getElementById("changePlayModeButton").value="切换到视频模式";
var t = player.getTime();
player.stop();
player.close();
player.getClip().update(clip1);
player.play();
player.onStart(function() {
seek(t);
});
} else {
playMode = 0;
document.getElementById("changePlayModeButton").value="切换到音频模式";
var t = player.getTime();
player.stop();
player.close();
player.getClip().update(clip0);
player.play();
player.onStart(function() {
seek(t);
});
}
}
*/
</script>
</html>
flowplayer具有很强的功能，光于api的使用可以查看flowplayer提供的详细文档。
自己现在也就会简单的使用而已，希望有机会可以深入的了解。
分享到：
相关推荐
NVR（Network Video Recorder）是网络视频录像机，它可以处理来自多个网络摄像机的RTSP流。每个NVR可能有不同的RTSP地址拼接规则，因此在对接不同品牌或型号的NVR时，我们需要了解并适配这些差异。 JavaCV是一个...
海康摄像头支持ONVIF协议，可以与多种NVR（网络视频录像机）设备兼容，确保了跨平台的兼容性。Web端通常会使用JavaScript库，如Video.js或Flowplayer，结合MJPEG或HLS流媒体技术，实现实时视频播放。用户只需在...
此外，它还支持直播、DVR（数字视频录像）功能，以及视频加密和版权保护机制，适合企业级应用。 总的来说，"功能强大的Web播放器"是网页多媒体展示的重要工具，具备高度的定制性和广泛的设备兼容性。FlowPlayer作为...
MaiaRecorder可能包含了一个简单的JavaScript播放器，或者依赖于现有的开源解决方案，如Video.js或Flowplayer，来展示录制的视频。 7. **用户界面设计**: 为了方便用户使用，MaiaRecorder需要一个直观的UI，允许...