高中物理教师求助：如何无需修改扩展名在Web应用播放iPhone.mov视频

核心逻辑 #

iPhone拍摄的.mov视频本质是H.264编码，和MP4的编码标准兼容，只是容器格式的标识问题。浏览器默认会根据文件扩展名或系统识别的MIME类型判断播放方式，但我们可以强制让浏览器按MP4格式解析上传的文件，跳过改扩展名的步骤。

前端实现方案 #

方案1：重新封装Blob指定MIME类型

当用户上传文件后，将原文件封装成video/mp4类型的Blob，再生成播放URL：

const fileInput = document.querySelector('input[type="file"]');
const videoPlayer = document.querySelector('video');

fileInput.addEventListener('change', (e) => {
  const uploadedFile = e.target.files[0];
  // 强制将文件按video/mp4类型封装
  const mp4Blob = new Blob([uploadedFile], { type: 'video/mp4' });
  const playUrl = URL.createObjectURL(mp4Blob);
  
  videoPlayer.src = playUrl;
  videoPlayer.load();
  
  // 页面卸载或视频播放完毕后释放资源
  videoPlayer.addEventListener('ended', () => {
    URL.revokeObjectURL(playUrl);
  });
});

方案2：直接指定视频源的type属性

利用HTML5视频元素的<source>标签，强制指定type="video/mp4"，忽略文件本身的MIME类型：

<video controls>
  <source id="videoSource" src="" type="video/mp4">
</video>
<input type="file" accept="video/*">

const fileInput = document.querySelector('input[type="file"]');
const videoSource = document.getElementById('videoSource');
const videoPlayer = document.querySelector('video');

fileInput.addEventListener('change', (e) => {
  const uploadedFile = e.target.files[0];
  const playUrl = URL.createObjectURL(uploadedFile);
  
  videoSource.src = playUrl;
  // 强制设置type为video/mp4，让浏览器按MP4解析
  videoSource.type = 'video/mp4';
  videoPlayer.load();
  
  // 释放资源
  videoPlayer.addEventListener('ended', () => {
    URL.revokeObjectURL(playUrl);
  });
});

关键说明 #

• 这两种方法只适用于编码兼容的视频（比如iPhone原生拍摄的H.264编码.mov），如果是其他编码的.mov可能无法播放，但你的学生场景完全匹配。
• 必须调用URL.revokeObjectURL释放临时URL，避免浏览器内存泄漏。

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