Flex 视频播放器全屏播放

最新推荐文章于 2020-11-24 21:20:29 发布

最新推荐文章于 2020-11-24 21:20:29 发布 · 151 阅读

文章标签：

#Flex #Flash #Adobe #JavaScript #CSS #ViewUI

Flex 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Flex应用程序中实现全屏播放功能。通过在*.mxml文件中添加按钮及对应事件处理函数，可以轻松地使应用具备全屏播放的能力。此外，还介绍了如何在index.template.html文件中进行必要的配置。

第一步： *.mxml文件中

view plain copy to clipboard print ?

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"   
    creationComplete="playLoad()" color="#0F7085" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">  
    <mx:Script>  
        <!--[CDATA[  
            import mx.binding.utils.BindingUtils;   
            import mx.events.SliderEvent;  
            import mx.events.VideoEvent;  
            import mx.controls.Alert;  
            import flash.events.MouseEvent;  
            import mx.controls.HSlider;  
            import flash.display.*;  
            import mx.collections.ArrayCollection;  
         
            // 全屏  
             private function full(evt:MouseEvent):void{  
                if (this.stage.displayState == StageDisplayState.FULL_SCREEN){  
                     this.stage.displayState = StageDisplayState.NORMAL;  
                     stage.scaleMode = StageScaleMode.NO_SCALE;  
                }  
                else{  
                     this.stage.displayState = StageDisplayState.FULL_SCREEN;  
                     stage.scaleMode = StageScaleMode.NO_SCALE;  
                }  
             }  
           ]]-->  
    </mx:Script>  
        <mx:Button width="10%" label="全屏播放" click="full(event);"/>  
</mx:Application>  
<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" 
creationComplete="playLoad()" color="#0F7085" backgroundGradientAlphas="[1.0, 1.0]" 
backgroundGradientColors="[#FFFFFF, #FFFFFF]"> 
<mx:Script> 
<!--[CDATA[ 
import mx.binding.utils.BindingUtils; 
import mx.events.SliderEvent; 
import mx.events.VideoEvent;
 import mx.controls.Alert; 
import flash.events.MouseEvent;
 import mx.controls.HSlider;
 import flash.display.*;
 import mx.collections.ArrayCollection; 
//全屏 
private function full(evt:MouseEvent):void{ 
if (this.stage.displayState == StageDisplayState.FULL_SCREEN){
 this.stage.displayState = StageDisplayState.NORMAL; 
stage.scaleMode = StageScaleMode.NO_SCALE; 
} else{
 this.stage.displayState = StageDisplayState.FULL_SCREEN;
 stage.scaleMode = StageScaleMode.NO_SCALE; 
}
 } 
]]-->
 </mx:Script>
 <mx:Button width="10%" label="全屏播放" click="full(event);"/> 
</mx:Application>

第二步：在Flex工程中html-template目录下的 index.template.html 文件，修改三处

view plain copy to clipboard print ?

<!-- saved from url=(0014)about:internet -->  
<html lang="en">  
<!--   
Smart developers always View Source.   
This application was built using Adobe Flex, an open source framework  
for building rich Internet applications that get delivered via the  
Flash Player or to desktops via Adobe AIR.   
Learn more about Flex at http://flex.org   
// -->  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<!--  BEGIN Browser History required section -->  
<link rel="stylesheet" type="text/css" href="history/history.css" mce_href="history/history.css" />  
<!--  END Browser History required section -->  
<title>${title}</title>  
<mce:script src="AC_OETags.js" mce_src="AC_OETags.js" language="javascript"></mce:script>  
<!--  BEGIN Browser History required section -->  
<mce:script src="history/history.js" mce_src="history/history.js" language="javascript"></mce:script>  
<!--  END Browser History required section -->  
<mce:style><!-- 
body { margin: 0px; overflow:hidden } 
--></mce:style><mce:style mce_bogus="1"><!-- 
body { margin: 0px; overflow:hidden } 
--></mce:style><style mce_bogus="1" mce_bogus="1">body { margin: 0px; overflow:hidden }</style>  
<mce:script language="JavaScript" type="text/javascript"><!--  
// -----------------------------------------------------------------------------  
// Globals  
// Major version of Flash required  
var requiredMajorVersion = ${version_major};  
// Minor version of Flash required  
var requiredMinorVersion = ${version_minor};  
// Minor version of Flash required  
var requiredRevision = ${version_revision};  
// -----------------------------------------------------------------------------  
// --></mce:script>  
</head>  
<body scroll="no">  
<mce:script language="JavaScript" type="text/javascript"><!--  
// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)  
var hasProductInstall = DetectFlashVer(6, 0, 65);  
// Version check based upon the values defined in globals  
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);  
if ( hasProductInstall && !hasRequestedVersion ) {  
    // DO NOT MODIFY THE FOLLOWING FOUR LINES  
    // Location visited after installation is complete if installation is required  
    var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";  
    var MMredirectURL = window.location;  
    documentdocument.title = document.title.slice(0, 47) + " - Flash Player Installation";  
    var MMdoctitle = document.title;  
    AC_FL_RunContent(  
        "src", "playerProductInstall",  
        "FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",  
        "width", "${width}",  
        "height", "${height}",  
        "align", "middle",  
        "id", "${application}",  
        "quality", "high",  
        "bgcolor", "${bgcolor}",  
        "name", "${application}",  
        "allowFullScreen","true",  
        "allowScriptAccess","sameDomain",  
        "type", "application/x-shockwave-flash",  
        "pluginspage", "http://www.adobe.com/go/getflashplayer"  
    );  
} else if (hasRequestedVersion) {  
    // if we've detected an acceptable version  
    // embed the Flash Content SWF when all tests are passed  
    AC_FL_RunContent(  
            "src", "${swf}",  
            "width", "${width}",  
            "height", "${height}",  
            "align", "middle",  
            "id", "${application}",  
            "quality", "high",  
            "bgcolor", "${bgcolor}",  
            "name", "${application}",  
            "allowFullScreen","true",  
            "allowScriptAccess","sameDomain",  
            "type", "application/x-shockwave-flash",  
            "pluginspage", "http://www.adobe.com/go/getflashplayer"  
    );  
  } else {  // flash is too old or we can't detect the plugin  
    var alternateContent = 'Alternate HTML content should be placed here. '  
    + 'This content requires the Adobe Flash Player. '  
    + '<a href="http://www.adobe.com/go/getflash" mce_href="http://www.adobe.com/go/getflash"></a>Get Flash</a>';  
    document.write(alternateContent);  // insert non-flash content  
  }  
// --></mce:script>  
<noscript>  
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"  
            id="${application}" width="${width}" height="${height}"  
            codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">  
            <param name="movie" value="${swf}.swf" />  
            <param name="quality" value="high" />  
            <param name="bgcolor" value="${bgcolor}" />  
            <param name="allowScriptAccess" value="sameDomain" />  
            <embed src="${swf}.swf" mce_src="${swf}.swf" quality="high" bgcolor="${bgcolor}"  
                width="${width}" height="${height}" name="${application}" align="middle"  
                play="true"  
                loop="false"  
                quality="high"  
                allowFullScreen="true"  
                allowScriptAccess="sameDomain"  
                type="application/x-shockwave-flash"  
                pluginspage="http://www.adobe.com/go/getflashplayer">  
            </embed>  
    </object>  
</noscript>  
</body>  
</html>