`
panyong_8
  • 浏览: 1290 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Flowplayer 播放RTMP协议的网络地址并准确记录视频播放的动作以播放的时长

阅读更多

    第一次写博客哎,不知道写点什么,回头一想写点最近遇到的前端方面的东西,以后可能重点还是在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是需要更改的。



 

 

  • 大小: 7.8 KB
  • 大小: 3.6 KB
分享到:
评论

相关推荐

    rtmp_sample_player_flowplayer.zip

    下面我们将深入探讨如何使用Flowplayer播放RTMP格式的视频以及这个"rtmp_sample_player_flowplayer.zip"压缩包的内容。 首先,RTMP协议由Adobe Systems开发,主要适用于Flash Player和HTML5中不直接支持的实时流...

    rtmp_sample_player_flowplayer

    5. **性能优化**:考虑到网络环境的差异,rtmp_sample_player_flowplayer可能会包含一些优化策略,比如自动调整视频质量以适应不同的网络条件,或者使用HLS(HTTP Live Streaming)作为备选协议,以应对RTMP不支持的...

    RTMP视频播放web播放.rar

    发布者需要知道服务器的RTMP地址(通常以rtmp://开头)和目标流路径。 6. **播放器配置**: 在Web播放器的配置中,需要指定RTMP流的URL,格式通常是rtmp://server-address/appname/streamkey。这里的"appname"是...

    h5 rtmp播放demo

    本示例是关于如何在H5环境下实现RTMP协议的视频播放,通过源码学习,可以深入理解这一技术的实现细节。 1. **H5多媒体元素:** H5中的`&lt;video&gt;`标签是实现视频播放的基础,它可以内联播放视频,支持多种视频格式,...

    优秀的FLV,RTMP在线播放器flowplayer源码最新版

    Flowplayer是一款广受欢迎的开源Flash视频播放器,尤其擅长处理FLV和RTMP格式的流媒体内容。在本文中,我们将深入探讨Flowplayer的核心特性、技术背景以及如何使用这款强大的在线播放器。 首先,让我们来了解一下...

    纯前端直接播放RTMP.zip

    - HTML文件:提供用户界面,让用户输入RTMP流地址并开始播放。 - CSS文件:可能包含样式表,用于美化用户界面。 - 可能还有示例RTMP流地址或其他配置文件,帮助用户快速测试。 为了使用这个压缩包,你需要将RTMP...

    rtmp视频流播放器

    RTMP视频流播放器是能够解析并播放通过RTMP协议传输的视频内容的软件。下面我们将详细探讨RTMP协议及其在视频流播放器中的应用。 1. RTMP协议简介: - RTMP协议是基于TCP的,用于在客户端和服务器之间实时传输音...

    rtmp_sample_player_flowplayer.rar

    本篇将深入探讨RTMP协议的基本原理,FlowPlayer的特点以及如何使用FlowPlayer实现RTMP流媒体播放。 一、RTMP协议解析 RTMP协议由Adobe公司开发,主要用于实时数据传输,尤其是音频、视频和数据的实时传输。该协议...

    flowplayer3.2.8(去水印).zip

    Flowplayer是一款知名的开源JavaScript视频播放器,用于在网页上嵌入和播放视频内容。这个"flowplayer3.2.8(去水印).zip"压缩包包含的是Flowplayer的3.2.8版本,该版本已经去除了默认的LOGO和水印,适合那些希望在...

    使用flowplayer播放视频录像

    如果我们要在Flowplayer中播放由Red5服务器提供的录像,我们需要确保Flowplayer支持RTMP协议,并正确配置流的URL。例如: ```javascript flowplayer("#player", { rtmp: { server: "rtmp://your.red5.server....

    基于RTMP协议的Flash流媒体网页播放器

    RTMP(Real-Time Messaging Protocol,实时消息传输协议)是一种广泛应用于网络流媒体传输的协议,由Adobe Systems开发,主要用于在互联网上进行音频、视频的实时传输。基于RTMP协议的Flash流媒体网页播放器,是过去...

    海康摄像头rtsp转rtmp,使用flv播放.zip

    本文将深入探讨如何将海康摄像头的RTSP视频流转换为RTMP并使用FLV播放器进行播放,以及解决前端延迟问题。 首先,RTSP是一种应用层协议,用于控制多媒体数据的传输,它允许用户通过网络实时播放音频和视频。海康...

    流媒体播放之flowplayer播放

    Flowplayer是一款广泛使用的开源JavaScript视频播放器,它允许开发者在网页上轻松集成视频播放功能。这个压缩包可能包含了Flowplayer的源代码、配置文件、示例或者相关文档,便于我们了解和定制播放器。 Flowplayer...

    flowplayer 视频播放

    9. **许可证信息**:`LICENSE.md`文件通常包含Flowplayer的开源许可信息,确保合法使用并遵循开源协议。 10. **自定义插件**:Flowplayer拥有强大的插件系统,允许开发人员扩展其功能,如添加分享按钮、社交登录、...

    rtmp-test.rar

    5. **测试播放**:保存并打开HTML文件,如果一切配置正确,Flowplayer应该能成功加载并播放RTMP视频流。 需要注意的是,RTMP协议需要服务器支持,如Adobe Flash Media Server或Open Source alternatives like Red5...

    网页视频播放器 flowplayer 5.4.0

    这为用户提供了灵活的选择,可以根据网络状况和视频内容选择最合适的播放方式。 2. **易集成性**:Flowplayer的设计使得它可以轻松地嵌入到HTML页面中,无论是在简单的静态网页还是复杂的动态网页(如PHP、ASP驱动...

    rtmp_flowplay_flowplayer.zip

    RTMP(Real-Time Messaging Protocol)是Adobe开发的一种实时传输协议,常用于在线视频流媒体服务,而FlowPlayer是一款开源的HTML5视频播放器,广泛应用于网页端视频播放。 【描述】:由于提供的描述信息简洁,我们...

    rtmp_flowplay_flowplayer_源码.zip

    在实际应用中,服务器端通常会部署如Adobe Flash Media Server或Red5这样的RTMP服务器,而客户端则使用支持RTMP协议的播放器来接收并播放流媒体内容。 接下来,Flowplay是一个强大的视频播放器框架,专为高性能、...

    js-flowplayer

    Flowplayer以其简洁的API、高度可定制性和对多种视频格式的支持而受到开发者的欢迎。这个压缩包文件可能包含了该库的核心JavaScript文件和其他相关资源。 Flowplayer的主要特点和功能包括: 1. **HTML5支持**:...

Global site tag (gtag.js) - Google Analytics