使用flowplayer播放视频录像

到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提供的详细文档。

自己现在也就会简单的使用而已,希望有机会可以深入的了解。

 

 

 

 

 

 

 

 

你可能感兴趣的:(JavaScript,html,F#)