iOS平台Cordova应用更换HTML5 video src后无法播放的解决方法求助

这个问题我之前做Cordova iOS项目时也踩过坑，iOS的WebView对video元素的处理确实和Electron/普通浏览器有不少差异，给你几个经过验证的解决思路：

1. 先重置视频状态再更新src #

iOS的video元素经常会因为内部状态缓存，导致切换src后无法触发重新加载。你可以按顺序执行暂停、清空src、等待状态重置，再设置新源并播放：

const video = document.getElementById('target-video');

// 第一步：暂停当前播放并清空源
video.pause();
video.src = '';
video.load();

// 监听emptied事件，确保状态重置完成后再设置新源
video.addEventListener('emptied', () => {
  video.src = 'your-new-video-url.mp4';
  video.load();
  // 播放要捕获错误，iOS的自动播放限制经常会导致失败
  video.play().catch(err => console.error('播放失败:', err));
}, { once: true }); // 用once确保只触发一次监听

这里要注意：iOS要求播放动作必须由用户交互（比如点击、触摸）触发，不能在页面加载或定时器里自动执行，否则会被浏览器拦截。

2. 直接替换整个Video元素 #

如果重置状态还是不行，不如直接换掉整个video元素——iOS WebView的video内部状态有时候顽固到难以清理，替换元素是最彻底的方案：

const videoContainer = document.getElementById('video-wrapper');
const oldVideo = document.getElementById('target-video');

// 创建新的video元素，复制原元素的必要属性
const newVideo = document.createElement('video');
newVideo.id = 'target-video';
newVideo.controls = oldVideo.controls;
newVideo.autoplay = oldVideo.autoplay;
// 按需添加其他属性：loop、muted等

// 设置新源并替换旧元素
newVideo.src = 'your-new-video-url.mp4';
videoContainer.replaceChild(newVideo, oldVideo);

// 触发播放，同样要绑定用户交互
newVideo.play().catch(err => console.error('播放失败:', err));

3. 检查内容安全策略与自动播放限制 #

• 内容安全策略（CSP）：在Cordova的config.xml里，确保media-src允许你加载视频的域名，比如：

  <meta http-equiv="Content-Security-Policy" content="media-src 'self' https://your-video-host.com; default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; ...">
  

  如果是本地视频，要确认文件路径正确，Cordova里可以用相对路径或cdvfile://协议访问本地资源。
• 自动播放限制：iOS绝对不允许无用户交互的自动播放，所有播放/切换动作必须绑定在用户的点击、触摸事件中，比如给按钮绑定点击事件来切换视频源。

4. 尝试使用Cordova原生视频插件 #

如果原生video元素的问题始终无法解决，可以试试专门的Cordova视频插件，它们封装了iOS的原生AVPlayer，兼容性更好：
比如cordova-plugin-video-player：

# 先安装插件
cordova plugin add cordova-plugin-video-player

然后用插件API播放视频：

VideoPlayer.play('your-new-video-url.mp4', {
  volume: 1.0,
  scalingMode: VideoPlayer.SCALING_MODE.SCALE_TO_FIT
}, () => {
  // 播放完成回调
}, (err) => {
  console.error('播放出错:', err);
});

这个方案需要你调整代码适配插件，但能避开WebView的video限制，稳定性更高。

最后提醒：一定要用真实的iOS设备测试，模拟器的视频播放行为和真机可能有差异。

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