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

来源:互联网 发布:雪 安静 知乎 编辑:程序博客网 时间:2024/06/05 17:28

主要是利用网络上开源项目 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 "";  elsereturn 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" onclick="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"  onclick="playSwf('/File/Ware/@ware.playFilePath',this)"  style="cursor:pointer">                                                <font class="doc101">                          文件名称 : @ware.cName   </font>                       <br/>                    </td>                </tr>                }            </table>            </div>        </td>    </tr> </table>


0 0
原创粉丝点击