HTML5的video、audio、Canvas、WebGL及MediaRecorder/WebRTC可全面替代已停用的Flash:video/audio支持多格式音视频播放与控制;Canvas实现2D动画与交互;WebGL支持高性能3D渲染;MediaRecorder与WebRTC完成音视频采集、录制与实时通信。

如果您希望在网页中实现音视频播放或动态图形渲染,但又需要避免使用已停止支持的Flash插件,则HTML5提供的video、audio和Canvas等原生标签可直接承担相应功能。以下是具体替代方案:
一、用
HTML5
1、在HTML中插入
2、通过src属性指定视频文件路径,或使用
立即学习“前端免费学习笔记(深入)”;
3、添加preload="metadata"属性以预加载视频元信息,提升首帧显示速度。
4、使用JavaScript调用play()、pause()、volume等方法实现自定义交互逻辑。
二、用
1、在页面中嵌入
2、为兼容不同浏览器,为同一音频资源提供至少两种编码格式的
3、设置autoplay属性需配合muted属性(部分浏览器强制要求),否则可能被自动拦截。
4、通过Audio对象实例调用currentTime、duration等属性获取并控制播放进度。
三、用Canvas结合JavaScript替代Flash矢量动画与交互游戏
Canvas提供位图绘制上下文,配合requestAnimationFrame和事件监听,可实现帧动画、鼠标/触控交互、物理模拟等复杂效果,其性能在现代设备上已接近原生应用。
1、在HTML中声明元素。
2、使用JavaScript获取2D绘图上下文:const ctx = document.getElementById('gameCanvas').getContext('2d');
3、在动画主循环中清空画布、更新对象状态、重绘所有元素,确保每帧调用ctx.clearRect()与ctx.drawImage()等方法。
4、绑定mousedown/touchstart事件捕获用户输入,通过坐标转换实现点击区域判定与响应。
四、用WebGL(基于Canvas)替代Flash 3D渲染
WebGL是Canvas的扩展上下文,允许直接调用GPU进行高性能3D图形渲染,Three.js等库进一步封装了场景、光源、材质等抽象概念,大幅降低开发门槛。
1、创建Canvas元素并获取webgl上下文:const gl = canvas.getContext('webgl');
2、编写顶点着色器与片元着色器代码,编译并链接成WebGLProgram对象。
3、将模型顶点数据上传至GPU缓冲区,设置attribute变量映射关系。
4、在渲染循环中调用gl.clear()、gl.drawArrays()等方法完成逐帧绘制。
五、用MediaRecorder API与WebRTC替代Flash实时音视频采集与传输
MediaRecorder API可录制来自getUserMedia获取的媒体流,WebRTC则支持点对点音视频通信,二者组合可完全取代Flash的摄像头/麦克风访问及RTMP推流功能。
1、调用navigator.mediaDevices.getUserMedia({video: true, audio: true})获取媒体流。
2、将媒体流传入new MediaRecorder(stream)实例启动本地录制。
3、监听dataavailable事件获取Blob分段,合并后生成可下载的视频文件。
4、使用RTCPeerConnection建立连接,通过addTrack()发送流,ontrack事件接收远端流并绑定至











