如何用ActionScript 3实现嵌入视频的正常尺寸与全屏切换？

嘿，这个问题我熟！在AS3里搞定嵌入视频的全屏/正常尺寸切换其实挺顺手的，尤其是你已经把视频放进现有项目的情况，下面是我常用的实现思路和代码示例：

核心思路 #

要实现来回切换，关键要做好这几点：

• 提前保存视频的原始宽高、位置，切换回正常模式时能精准恢复
• 利用AS3的StageDisplayState控制全屏状态，同时调整视频的缩放模式适配不同场景
• 监听舞台尺寸变化，确保全屏时视频能跟着窗口大小自动调整

代码实现（基础Video类场景） #

假设你的视频实例叫myVideo，已经添加到舞台或某个容器里，直接看代码：

1. 定义变量保存原始状态 #

// 保存视频原始属性的变量
private var originalWidth:Number;
private var originalHeight:Number;
private var originalX:Number;
private var originalY:Number;
// 标记当前是否处于全屏状态
private var isFullScreen:Boolean = false;

2. 初始化视频与事件监听 #

在视频加载完成或者项目初始化的时候，调用这个方法：

private function initVideoSetup():void {
    // 记录视频的初始状态
    originalWidth = myVideo.width;
    originalHeight = myVideo.height;
    originalX = myVideo.x;
    originalY = myVideo.y;
    
    // 给切换按钮绑定点击事件（假设你有个叫btnToggleFullscreen的按钮）
    btnToggleFullscreen.addEventListener(MouseEvent.CLICK, handleFullscreenToggle);
    
    // 监听舞台尺寸变化，全屏时自动适配窗口
    stage.addEventListener(Event.RESIZE, handleStageResize);
}

3. 全屏/正常模式切换逻辑 #

private function handleFullscreenToggle(e:MouseEvent):void {
    isFullScreen = !isFullScreen;
    
    if (isFullScreen) {
        // 切换到全屏状态
        stage.displayState = StageDisplayState.FULL_SCREEN;
        // 设置视频缩放模式（根据需求选）
        myVideo.scaleMode = StageScaleMode.EXACT_FIT; // 拉伸铺满，会变形
        // 可选：NO_BORDER（保持比例裁剪）、SHOW_ALL（保持比例留黑边）
        // 让视频铺满整个舞台
        myVideo.width = stage.stageWidth;
        myVideo.height = stage.stageHeight;
        myVideo.x = 0;
        myVideo.y = 0;
    } else {
        // 恢复正常模式
        stage.displayState = StageDisplayState.NORMAL;
        // 恢复原始缩放模式
        myVideo.scaleMode = StageScaleMode.NO_SCALE;
        // 还原视频的原始尺寸和位置
        myVideo.width = originalWidth;
        myVideo.height = originalHeight;
        myVideo.x = originalX;
        myVideo.y = originalY;
    }
}

4. 处理舞台尺寸变化 #

当用户拖动浏览器窗口或者调整播放器大小时，确保全屏视频能自适应：

private function handleStageResize(e:Event):void {
    if (isFullScreen) {
        myVideo.width = stage.stageWidth;
        myVideo.height = stage.stageHeight;
    }
}

适配FLVPlayback组件的情况 #

如果你的项目用的是FLVPlayback组件（Flash自带的视频播放器组件），代码稍微调整一下就行：

private function handleFLVFullscreenToggle(e:MouseEvent):void {
    isFullScreen = !isFullScreen;
    
    if (isFullScreen) {
        stage.displayState = StageDisplayState.FULL_SCREEN;
        myFLVPlayback.scalerMode = "exactFit"; // 对应StageScaleMode的枚举值
        myFLVPlayback.width = stage.stageWidth;
        myFLVPlayback.height = stage.stageHeight;
        myFLVPlayback.x = 0;
        myFLVPlayback.y = 0;
    } else {
        stage.displayState = StageDisplayState.NORMAL;
        myFLVPlayback.scalerMode = "none";
        myFLVPlayback.width = originalWidth;
        myFLVPlayback.height = originalHeight;
        myFLVPlayback.x = originalX;
        myFLVPlayback.y = originalY;
    }
}

关键注意事项 #

• 发布设置必须允许全屏：在Flash Professional的发布设置→HTML选项卡中，勾选“允许全屏”，否则代码不会生效
• 浏览器安全限制：全屏操作必须由用户主动触发（比如点击按钮），不能自动触发，这是浏览器的安全规则
• 缩放模式选择：根据你的视频比例和需求选合适的缩放模式，避免视频变形或显示不全
• 容器层级问题：如果视频放在其他容器里，要确保全屏时容器不会限制视频的尺寸（比如容器的clipContent设为false）

内容的提问来源于stack exchange，提问作者Jane Doe