我必须强调一个极其重要的前提

flash网页视频播放器代码
(图片来源网络,侵删)

Adobe Flash Player 已于2025年12月31日正式停止支持,并被所有主流浏览器(Chrome, Firefox, Edge, Safari等)禁用。 在现代网页上使用 Flash 技术不仅会导致内容无法播放,还会带来严重的安全风险。

强烈建议您不要在新项目中使用 Flash 播放器,现代标准是使用 HTML5 的 <video>,它更安全、更高效、对移动设备更友好,并且无需任何插件。

为了满足学习和理解历史技术的需求,我将为您提供完整的 Flash 视频播放器代码,并详细解释其工作原理。


第一部分:为什么现在不推荐使用 Flash?

在展示代码之前,请务必了解以下几点:

flash网页视频播放器代码
(图片来源网络,侵删)
  1. 已淘汰技术:Flash 已被官方弃用,浏览器不再支持。
  2. 安全风险:旧的 Flash 文件可能包含未被修复的安全漏洞,使您的网站易受攻击。
  3. 性能问题:Flash 播放器通常比原生 HTML5 视频消耗更多的 CPU 和内存资源。
  4. 移动设备不支持:iOS 设备(如 iPhone 和 iPad)从未支持过 Flash。

现代替代方案:HTML5 <video> 只需几行简单的 HTML 代码即可实现功能:

<video width="640" height="360" controls>
  <source src="your-video.mp4" type="video/mp4">
  您的浏览器不支持 HTML5 视频。
</video>

controls 属性会自动生成播放、暂停、音量、进度条等所有控件,这是目前推荐的做法。


第二部分:Flash 视频播放器代码示例

一个完整的 Flash 播放器实现通常需要三个部分:

  1. HTML:在网页中嵌入 Flash 影片(.swf 文件)。
  2. ActionScript (AS3):Flash 影片内部的编程逻辑,用于控制视频播放。
  3. JavaScript (可选):用于与 Flash 影片进行交互(通过网页按钮控制播放)。

我们将创建一个简单的播放器,它能够播放视频、显示播放/暂停按钮、音量控制和进度条。

flash网页视频播放器代码
(图片来源网络,侵删)

HTML 代码 (index.html)

这是网页的骨架,负责将 Flash 播放器嵌入到页面中。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">Flash 视频播放器示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }
        #player-container {
            text-align: center;
        }
        /* 这是嵌入 Flash 影片的关键代码 */
        #flash-player {
            display: block;
        }
    </style>
</head>
<body>
    <div id="player-container">
        <h1>Flash 视频播放器 (已过时)</h1>
        <p>注意:此代码在现代浏览器中无法工作。</p>
        <!-- 
          object 和 embed 标签是嵌入 Flash 的传统方式。
          object 用于非 IE 浏览器,embed 用于旧版 IE。
          现代做法是只使用 object,并包含 embed 作为回退。
        -->
        <object 
            classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
            codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
            width="640" 
            height="480"
            id="flash-player">
            <param name="movie" value="video_player.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#000000" />
            <param name="allowScriptAccess" value="sameDomain" />
            <!-- 
              embed 标签作为回退,确保在更多浏览器中显示。
              这里的 src 和 object 中的 movie 值必须一致。
            -->
            <embed 
                src="video_player.swf" 
                quality="high" 
                bgcolor="#000000"
                width="640" 
                height="480"
                name="flash-player"
                type="application/x-shockwave-flash"
                pluginspage="http://www.macromedia.com/go/getflashplayer" 
                allowScriptAccess="sameDomain" />
        </object>
    </div>
</body>
</html>

ActionScript 3.0 代码 (video_player.fla / video_player.as)

这是播放器的“大脑”,我们将在 Adobe Flash Professional (现在是 Adobe Animate) 软件中创建一个 .fla 文件,并将以下代码附加到主时间轴或一个自定义的类文件中。

为了简化,我们直接将其放在主时间轴的第1帧。

// video_player.fla 的主时间轴代码
// 导入必要的类
import flash.display.SimpleButton;
import flash.events.MouseEvent;
import flash.media.SoundTransform;
import flash.media.Video;
import flash.net.NetConnection;
import flash.net.NetStream;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
// --- 1. 定义变量 ---
var video:Video;                  // 用于显示视频的 Video 对象
var nc:NetConnection;             // 网络连接
var ns:NetStream;                 // 网络流
var videoPath:String = "your-video.flv"; // 视频文件路径 (必须是 FLV 格式)
var playPauseBtn:SimpleButton;   // 播放/暂停按钮
var volumeSlider:TextField;       // 用于显示和调整音量的文本字段
var volumeValue:Number = 1;       // 默认音量 (0 到 1)
var progressTextField:TextField;  // 显示播放进度的文本字段
// --- 2. 初始化函数 ---
function init():void {
    setupVideo();
    setupControls();
    setupEventListeners();
}
// --- 3. 设置视频 ---
function setupVideo():void {
    // 创建 NetConnection
    nc = new NetConnection();
    nc.connect(null); // 连接到本地服务器 (null)
    // 创建 NetStream
    ns = new NetStream(nc);
    // 创建 Video 对象并将其附加到 NetStream
    video = new Video();
    video.attachNetStream(ns);
    // 设置视频大小和位置
    video.width = 640;
    video.height = 360;
    video.x = 0;
    video.y = 0;
    // 将视频添加到显示列表
    addChild(video);
    // 播放视频
    ns.play(videoPath);
    // 监听视频元数据加载完成事件 (可选,用于获取视频宽高等)
    ns.client = {
        onMetaData: function(info:Object):void {
            trace("视频元数据已加载: " + info.duration);
            // 可以在这里根据视频尺寸调整播放器大小
        }
    };
}
// --- 4. 设置控件 ---
function setupControls():void {
    // 创建播放/暂停按钮 (这里用一个简单的矩形代替,实际项目中应使用按钮元件)
    playPauseBtn = new SimpleButton();
    playPauseBtn.graphics.beginFill(0xCCCCCC);
    playPauseBtn.graphics.drawRect(0, 0, 80, 30);
    playPauseBtn.graphics.endFill();
    playPauseBtn.x = 10;
    playPauseBtn.y = video.height + 10;
    playPauseBtn.mouseChildren = false; // 确保按钮本身可点击
    addChild(playPauseBtn);
    // 创建音量控制文本字段
    volumeSlider = new TextField();
    volumeSlider.text = "音量: " + (volumeValue * 100).toFixed(0) + "%";
    volumeSlider.autoSize = TextFieldAutoSize.LEFT;
    volumeSlider.x = 100;
    volumeSlider.y = video.height + 20;
    volumeSlider.selectable = true; // 允许用户输入
    addChild(volumeSlider);
    // 创建进度显示文本字段
    progressTextField = new TextField();
    progressTextField.autoSize = TextFieldAutoSize.LEFT;
    progressTextField.textColor = 0xFFFFFF;
    progressTextField.x = 10;
    progressTextField.y = video.height - 25;
    addChild(progressTextField);
}
// --- 5. 设置事件监听器 ---
function setupEventListeners():void {
    // 播放/暂停按钮点击事件
    playPauseBtn.addEventListener(MouseEvent.CLICK, onPlayPauseClick);
    // 音量文本字段输入事件 (简化版,实际应使用滑块组件)
    volumeSlider.addEventListener(Event.CHANGE, onVolumeChange);
    // 使用 enterFrame 事件来持续更新进度
    addEventListener(Event.ENTER_FRAME, updateProgress);
}
// --- 6. 事件处理函数 ---
function onPlayPauseClick(e:MouseEvent):void {
    if (ns.time > 0 && !ns.paused) {
        ns.pause(); // 暂停
    } else {
        ns.resume(); // 播放
    }
}
function onVolumeChange(e:Event):void {
    // 简单解析输入的文本 ("音量: 50%")
    var match:Array = volumeSlider.text.match(/(\d+)%/);
    if (match) {
        volumeValue = Number(match[1]) / 100;
        var soundTransform:SoundTransform = new SoundTransform();
        soundTransform.volume = volumeValue;
        ns.soundTransform = soundTransform;
    }
}
function updateProgress(e:Event):void {
    // 格式化时间 ( 00:45 / 03:20)
    var currentTime:Number = formatTime(ns.time);
    var totalTime:Number = formatTime(ns.bufferLength); // 简化处理,最好从元数据获取总时长
    progressTextField.text = currentTime;
}
// 辅助函数:将秒数格式化为 MM:SS
function formatTime(seconds:Number):String {
    var minutes:int = int(seconds / 60);
    var secs:int = int(seconds % 60);
    return (minutes < 10 ? "0" + minutes : minutes) + ":" + (secs < 10 ? "0" + secs : secs);
}
// --- 7. 启动应用 ---
init();

如何使用这段 AS3 代码:

  1. 打开 Adobe Animate (或旧版的 Adobe Flash Professional)。
  2. 创建一个新的 ActionScript 3.0 文档。
  3. 将上面的代码复制并粘贴到主时间轴的第1帧。
  4. 保存文件为 video_player.fla
  5. Ctrl + Enter (Windows) 或 Cmd + Enter (Mac) 来测试和导出。
  6. 导出后,你会得到一个 video_player.swf 文件,这就是你的播放器程序。
  7. 注意:你需要一个 FLV 格式的视频文件(your-video.flv),并将它和 video_player.swf 放在同一个目录下。

第三部分:完整的 Flash 播放器项目结构

一个更专业的播放器会使用组件和外部类,但上面的例子展示了最核心的逻辑。

/flash-video-player
|-- index.html          # 网页文件
|-- video_player.swf    # 编译后的 Flash 播放器程序
|-- your-video.flv      # 要播放的视频文件 (必须是 FLV 或 F4V)
|-- video_player.fla    # Flash 源文件 (用于编辑)
|-- video_player.as     # ActionScript 源文件 (如果使用外部类)
  • Flash 播放器原理:通过 HTML 的 <object>/embed 标签加载一个 .swf 文件。.swf 文件内部使用 ActionScript 编程,通过 NetConnectionNetStream 来加载和播放外部的 FLV/F4V 视频流,并创建可视的控件来与用户交互。
  • 核心 AS3 组件Video (显示)、NetConnection (连接)、NetStream (数据流)、SoundTransform (音量控制)。
  • 最终忠告:虽然理解 Flash 的工作原理很有趣,但在 2025 年及以后,请务必将您的技能和时间投入到 HTML5, CSS3, 和 JavaScript 上,使用 <video> 标签是构建现代、安全、可访问的网页视频体验的唯一正确途径。