开源 FlexPaper 制作的PDF,FLV等文件的播放器

主要是利用网络上开源项目 FlexPaper 制作播放PDF,SWF,FLV等格式的文件,网络有很多，简要记录一下，如下为播放器有关以供参考：

FlexPaper相关JS文件：(官网： http://flexpaper.devaldi.com/ )

<script src="projectName/flexpaper/flexpaper_flash.js" type="text/javascript"></script>

<script src=“projectName/videoPlayer/swfobject.js" type="text/javascript"></script>

部分HTML代码：

<script type="text/javascript">
    $(document).ready(function(){
        //编写代码
    var ld_flashshow = "width:584px;height:350px;margin:0px 0px 0px 0px;";
    var ld_flashhide = "width:0px;height:0px;margin:0px 0px 0px 0px;";
    function showVideoPlay(){
        $("#videoPaper").html('');
        var pageHost = (document.location.protocol == 'https:') ? 'https://' : 'http://';
        var videohtml = "";
            videohtml += "<div id='flashContent'>" + 
              "<p>To view this page ensure that Adobe Flash Player version 10.3.0 or greater is installed.</p>" + 
		     "<a href='http://www.adobe.com/go/getflashplayer'><img src='" + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>"+ 
		        "</div>" +
				   "<noscript><a href='http://www.adobe.com/go/getflashplayer/' style='color:black'><img src='images/ERROR_getFlashPlayer.gif' width='584' height='390' /></a><noscript>";
        
		$("#videoPaper").html(videohtml);
    }
    function playSwf(swfFile,input){
        $("#picPaper").attr("style", "display:none");
        $("#videoPaper").attr("style", "display:none");
        $("#flexPaper").attr("style", ld_flashshow);
        showTDstyle(input);//选中样式
        //$FlexPaper().loadSwf(swfFile);
        showFlexPaperViewer(swfFile);
    }
    function playVideo(videoFile,input) {
        showVideoPlay();
        showTDstyle(input);//选中样式
        $("#picPaper").attr("style", "display:none");
        $("#flexPaper").attr("style", ld_flashhide);
        $("#videoPaper").attr("style", "display:block");
        var url = "@Request.Url.AbsoluteUri";
        url = url.substring(0, url.indexOf("/", 8));
        initialise(url + videoFile);
    }
        var queryParameters = new Array();
        var flashVars = "";
		var tag = "";
		var url = "";

        function initialise(filepath) 
        {  
			function getUrlParam( name )
			{
				  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
				  var regexS = "[\\?&]"+name+"=([^&#]*)";
				  var regex = new RegExp( regexS );
				  var results = regex.exec( window.location.href );
				  if( results == null )
						return "";
				  else
						return unescape( results[1] );
			}
			queryParameters['source'] = getUrlParam("/Video/sample.flv");
			queryParameters['type'] = getUrlParam('type');
			queryParameters['idx'] = getUrlParam('idx');
            
			queryParameters['source'] = filepath;
			if( queryParameters['type'] == "" )
				queryParameters['type'] = "recorded";
			if( queryParameters['idx'] == "" )
				queryParameters['idx'] = "2";

			flashVars += "&src=";
            flashVars += queryParameters['source'];
            flashVars += "&autoHideControlBar=";
            flashVars += unescape("true");
            flashVars += "&streamType=";
            flashVars += queryParameters['type'];
            flashVars += "&autoPlay=";
            flashVars += unescape("true");
       	    flashVars += "&verbose=";
		    flashVars += "true";
            var soFlashVars = {
                src: queryParameters['source'],
			 streamType: queryParameters['type'],
                autoPlay: "true",
                controlBarAutoHide: "true",
                controlBarPosition: "bottom"
            };
 			tag = "<object width='584' height='390' id='SampleMediaPlayback' name='SampleMediaPlayback' type='application/x-shockwave-flash' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' ><param name='movie' value='swfs/SampleMediaPlayback.swf' /> <param name='quality' value='high' /> <param name='bgcolor' value='#000000' /> <param name='allowfullscreen' value='true' /> <param name='flashvars' value= '"
            + flashVars+"'/><embed src='@Url.Content("~/projectName/Scripts/videoPlayer/swfs/SampleMediaPlayback.swf")' width='584' height='390' id='SampleMediaPlayback' quality='high' bgcolor='#000000' name='SampleMediaPlayback' allowfullscreen='true' pluginspage='http://www.adobe.com/go/getflashplayer'   flashvars='"+ flashVars +"' type='application/x-shockwave-flash'> </embed></object>";
		<!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. -->
		var swfVersionStr = "10.3.0";
		<!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
		var xiSwfUrlStr = "@Url.Content("~/projectName/Scripts/videoPlayer/swfs/playerProductInstall.swf")";
		var params = {};
		params.quality = "high";
		params.bgcolor = "#000000";
		params.allowscriptaccess = "sameDomain";
		params.allowfullscreen = "true";
        params.base=".";  
		var attributes = {};
		attributes.id = "SampleMediaPlayback";
		attributes.name = "SampleMediaPlayback";
		attributes.align = "middle";
		swfobject.embedSWF("@Url.Content("~/projectName/Scripts/videoPlayer/SampleMediaPlayback.swf")", "flashContent", "584", "390", swfVersionStr, xiSwfUrlStr, soFlashVars, params, attributes);
		<!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->
        swfobject.createCSS("#flashContent", "display:block;text-align:left;");
        } 
        function showTDstyle(input){
            $(input).attr("style", "cursor:pointer;background-color:#8B814C");
            var tdid = $("#selectTD").val();
            if(tdid == null || tdid == ''){
                $("#selectTD").attr("value", input.id);
                return;
            }
            var target = "#"+ tdid+ "";
            $(target).attr("style", "cursor:pointer;background-color:#222222");
            $("#selectTD").attr("value", input.id);
        }

</script> 

<div  style="margin-top:10px">
<table width="884"   cellspacing="0" cellpadding="0" bgcolor="#242424" style="border:2px solid #181818">
    <tr>
        <td width="586px" height="390px" bgcolor="#222222" valign="top" align="center" style="margin:1px 1px 1px 1px;">
            <div id="picPaper" style="width:584px;height:390px;display:block">
                @{
                    if (!string.IsNullOrEmpty(course.PictureFilePath))
                    {
                        <img src='/Images/Cover/@course.PictureFilePath'  width='584px' height='390px' />
                    }
                    else
                    {
                        <img src='/Images/item_cource_df.png'  width='584px' height='390px' />
                    }
                  }
            </div>
            <div id="flexPaper" style="width:0px;height:0px;margin:0px 0px 0px 0px;">
　　            <a id="viewerPlaceHolder" style="width:584px;height:350px;"></a>
                <script type="text/javascript">
                    function showFlexPaperViewer(path) {
　　                var fp = new FlexPaperViewer('@Url.Content("~/projectName/Scripts/flexpaper/FlexPaperViewer")',
                            'viewerPlaceHolder', { config: {
                                SwfFile: escape(path),
                                Scale: 0.6,
                                ZoomTransition: 'easeOut',
                                ZoomTime: 0.5,
                                ZoomInterval: 0.2,
                                FitPageOnLoad: true,
                                FitWidthOnLoad: true,
                                FullScreenAsMaxWindow: true,
                                ProgressiveLoading: true,
                                MinZoomSize: 0.2,
                                MaxZoomSize: 5,
                                SearchMatchAll: false,
                                InitViewMode: 'Portrait',
                                ViewModeToolsVisible: false,
                                ZoomToolsVisible: true,
                                NavToolsVisible: true,
                                CursorToolsVisible: false,
                                SearchToolsVisible: false,
                                localeChain: 'zh_CN'
                            }
                        });
                    }
               </script>
            </div>
            <div id='videoPaper' style='display:none'>
               
            </div>
        </td>
        <td  width="20px" height="390px" valign="top" bgcolor="#181818"/>
        <td  width="277px" height="390px" valign="top" align="left" bgcolor="#181818">
        <span style="height:36px;width:277px;text-align:center;display:block;line-height:38px;"  class="doc100">文件系列列表</span>
        <hr align="left" size="1" width="255px" style="color:#5a5a5a;margin:0 0 0 4px;"/>
         <div  style="overflow-y:scroll; height:350px;">
            <table id="ss" width="100%" style="border:1px solid #181818"><input id="selectTD" type=hidden value="">
                @foreach (var video in videoList)
                {
                 <tr>
                    <td align="left" id="td_@video.Refid" vertical-align="middle" bgcolor="#222222" height="46px" οnclick="playVideo('/File/Video/@video.playFilePath',this)" style="cursor:pointer">
                        <img src="@Url.Content("~/Images/play.png")" alt="视频" valign="middle"/> 
                       
                       @if (!string.IsNullOrEmpty(video.aliasName))
                       {
                         <font  class="doc101">文件名称 :  @video.aliasName </font>
                       }
                       else 
                       { 
                          <font  class="doc101">文件名称 :  @video.videoName </font>
                       }
                      <br />
                    </td>
                 </tr>
                }
                @foreach (var ware in wareList)
                {
                <tr>
                    <td align="left" id="td_@ware.Refid" vertical-align="middle"  height="46px" bgcolor="#222222"  οnclick="playSwf('/File/Ware/@ware.playFilePath',this)"  style="cursor:pointer">
                        
                        <font class="doc101">
                          文件名称 : @ware.cName   </font>
                       <br/>
                    </td>
                </tr>
                }
            </table>
            </div>
        </td>
    </tr>
 </table>