HTML5播放隔行扫描视频出现运动模糊等问题，需反交错处理：一、Canvas逐帧采样合并奇偶场；二、像素差值动态检测插值；三、WebAssembly加速Weave算法；四、MediaStream Processing API结合Worker异步处理；五、FFmpeg.wasm调用yadif滤镜。
如果您在HTML5中播放隔行扫描视频时出现运动模糊、锯齿或闪烁现象，则可能是由于视频未经过反交错处理。以下是实现反交错效果的多种方法：
一、使用Canvas逐帧采样合并场
该方法通过读取视频帧的奇偶场（Top Field / Bottom Field），将两场像素按时间顺序合并为一帧，适用于已知场序且无运动补偿需求的场景。
1、创建元素并获取2D上下文，设置宽高与视频一致。
2、监听video元素的timeupdate事件，在每一帧渲染前调用drawImage()两次，分别绘制奇数行和偶数行区域。
立即学习“前端免费学习笔记（深入）”；
3、第一次绘制时使用ctx.drawImage(video, 0, 0, width, height, 0, 0, width, height/2)仅捕获上半区域；第二次绘制时偏移Y坐标为height/2，绘制下半区域到目标Canvas的下半部分。
4、将合并后的Canvas内容作为最终输出源，替代原始显示。
二、基于像素差值的动态检测反交错
该方法分析连续两帧间同一位置像素的亮度变化，对运动区域采用插值融合，静止区域直接保留一场，减少运动伪影。
1、用getImageData()提取当前帧与前一帧的RGBA数据。
2、遍历每个像素点，计算其亮度值（0.299*R + 0.587*G + 0.114*B）及相邻帧对应位置的差值绝对值。
3、若差值大于阈值THRESHOLD = 15，则对该像素所在行执行线性插值：取上一场同列像素与下一场同列像素的平均值。
4、将处理后的像素数组写入新ImageData对象，并用putImageData()绘制到Canvas。
三、WebAssembly加速的Weave反交错
利用WASM模块加载预编译的C语言反交错逻辑，提升多行并行处理效率，适合高分辨率实时视频流。
1、编写C函数实现Weave算法：将输入帧视为两个独立场，交替复制奇数行与偶数行至输出缓冲区。
2、使用Emscripten编译为.wasm文件，并通过WebAssembly.instantiateStreaming()加载。
3、创建共享内存视图（Uint8Array），将Canvas像素数据同步至WASM线性内存。
4、调用导出函数执行反交错运算，再将结果内存视图回传至JavaScript端进行putImageData()更新。
四、使用MediaStream Processing API结合自定义Worker
通过MediaStreamTrackProcessor接入视频轨道，在Worker线程中异步处理每一帧，避免主线程阻塞。
1、从获取captureStream()，创建MediaStreamTrackProcessor实例。
2、在Worker中接收VideoFrame对象，调用copyTo()将其转换为ImageBitmap。
3、使用createImageBitmap()生成可绘制资源后，通过离屏Canvas执行场分离与垂直缩放融合。
4、处理完成后调用transferToImageBitmap()返回结果帧，并由MediaStreamTrackGenerator输出为新轨道。
五、调用FFmpeg.wasm进行软解+反交错滤镜
借助FFmpeg.wasm内置的yadif（Yet Another De-Interlacing Filter）滤镜，支持自适应模式与场序自动检测。
1、初始化FFmpeg.wasm环境，加载ffmpeg-core.js与ffmpeg-glue.js。
2、构造命令参数：-i input.mp4 -vf yadif=mode=1:parity=-1:deint=1 -c:v libx264 output.mp4。
3、将视频文件作为Uint8Array写入虚拟文件系统，执行命令后读取输出流。
4、使用URL.createObjectURL()将输出Blob转为可播放URL，绑定至的src属性。
