面向IE的JavaScript异步函数及Canvas视频播放器开发技术问询

嘿，作为JavaScript新手，你已经迈出了很棒的第一步！咱们先把Canvas绘制视频的代码补全，再搞定IE浏览器的异步函数兼容问题～

一、完善Canvas视频绘制的代码 #

你给出的paintVideo函数没写完，核心是要通过requestAnimationFrame持续绘制视频帧，才能实现流畅的播放效果。另外还要处理一些细节，比如Canvas尺寸适配、播放错误捕获等。

完整代码示例 #

HTML部分

<!-- 隐藏原生video元素，我们用Canvas来显示 -->
<video id="video" style="display: none;" crossorigin="anonymous"></video>
<canvas id="myCanvas" style="width: 100%; max-width: 800px;"></canvas>

JavaScript部分

// 获取Canvas和上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let video = document.getElementById('video');

async function startPlayback(vidSource) {
  // 重置视频源和状态
  video.src = vidSource;
  video.loop = false;
  
  // 先移除旧的监听，避免重复绑定
  video.removeEventListener('playing', paintVideo);
  video.addEventListener('playing', paintVideo);

  try {
    // 播放视频，play()返回Promise，用await等待播放开始
    await video.play();
    console.log('视频开始播放啦');
  } catch (err) {
    console.error('播放失败:', err);
  }
}

function paintVideo() {
  // 确保Canvas尺寸和显示区域一致，避免画面拉伸
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;

  // 将当前视频帧绘制到Canvas上
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

  // 如果视频没暂停也没结束，继续绘制下一帧
  if (!video.paused && !video.ended) {
    requestAnimationFrame(paintVideo);
  }
}

关键细节说明 #

• requestAnimationFrame：比setInterval更适合做帧动画，它会和浏览器的刷新频率同步，避免卡顿和丢帧。
• Canvas尺寸适配：每次绘制前更新Canvas的width和height，保证画面和显示区域匹配，不会出现模糊或拉伸。
• 播放错误处理：用try/catch捕获video.play()可能抛出的错误（比如浏览器自动播放限制）。

二、Internet Explorer的异步函数兼容方案 #

IE（尤其是IE11及以下）完全不支持ES6的async/await语法，也对Promise的支持有限，我们可以用两种方式解决：

方案1：手动用Promise替代async/await #

把async/await转写成ES5兼容的Promise写法，同时处理IE11中video.play()不返回Promise的情况：

function startPlayback(vidSource) {
  video = document.getElementById('video');
  video.src = vidSource;
  video.loop = false;
  
  video.removeEventListener('playing', paintVideo);
  video.addEventListener('playing', paintVideo);

  // 处理IE11不支持play()返回Promise的情况
  const playPromise = video.play();
  if (playPromise !== undefined) {
    playPromise.then(() => {
      console.log('视频播放启动');
    }).catch(err => {
      console.error('播放出错:', err);
    });
  } else {
    // 直接触发播放，依赖playing事件来启动绘制
    video.play();
  }
}

方案2：用Babel转译+Polyfill #

如果你的项目有构建流程（比如Webpack），可以用Babel把async/await转译成IE能识别的ES5代码，同时引入必要的Polyfill：

• 安装@babel/preset-env和regenerator-runtime
• 在Babel配置中设置目标浏览器为ie 11，它会自动处理转译和Polyfill注入

额外注意事项 #

• IE11只支持MP4格式的视频（H.264编码），要确保你的视频源是兼容的格式。
• IE11支持requestAnimationFrame，不需要额外Polyfill，但如果要兼容IE9及以下，需要手动添加requestAnimationFrame的Polyfill。

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