Titanium Appcelerator Android：WebView中本地HTML5音频/视频无法播放

我之前也踩过Titanium Android WebView里媒体播放的这个坑，结合官方文档和实际调试经验，总结了几个针对性的解决办法，应该能帮你搞定MediaResourceGetter: Invalid url和MediaPlayer: error (262, 0)这些报错：

一、本地HTML5音视频资源的处理 #

本地资源播放失败大多是路径格式不对或者WebView的跨域限制导致的：

• 用Titanium原生API获取资源路径：别直接写相对路径或者file://协议，Titanium有专门的资源目录访问方式。把音频/视频放在Resources（旧架构）或app/assets（新架构）目录后，用Ti.Filesystem.getResourcesDirectory()拿到正确的路径，再嵌入到HTML里：

  var localAudioPath = Ti.Filesystem.getResourcesDirectory() + "audio.mp3";
  var webView = Ti.UI.createWebView({
    html: `<html><body><audio src="${localAudioPath}" controls></audio></body></html>`
  });
  

• 开启WebView的文件访问权限：Android WebView默认限制file://协议的跨域访问，在创建WebView时开启这两个属性：

  var webView = Ti.UI.createWebView({
    allowFileAccess: true,
    allowFileAccessFromFileURLs: true,
    html: '<html>...</html>'
  });
  

二、外部存储媒体文件的处理 #

外部存储的文件问题主要集中在权限和路径格式上：

• 动态申请存储权限：Android 6.0及以上版本需要动态申请READ_EXTERNAL_STORAGE权限（如果要写入文件还需WRITE_EXTERNAL_STORAGE），可以用Titanium的权限API处理：

  Ti.Media.requestPermissions([Ti.Media.READ_EXTERNAL_STORAGE], function(e) {
    if (e.success) {
      // 权限获取成功后加载WebView
    }
  });
  

• 使用正确的外部存储路径格式：通过Ti.Filesystem.getExternalStorageDirectory()获取外部存储根目录，再拼接文件名，最后用encodeURI转义特殊字符避免路径错误：

  var externalVideo = Ti.Filesystem.getFile(Ti.Filesystem.externalStorageDirectory, "video.mp4");
  if (externalVideo.exists()) {
    var webView = Ti.UI.createWebView({
      html: `<html><body><video src="${encodeURI(externalVideo.nativePath)}" controls></video></body></html>`,
      allowFileAccess: true,
      allowFileAccessFromFileURLs: true
    });
  }
  

• 排查MediaPlayer错误262：这个错误基本是路径无效或权限不足，一定要先用externalVideo.exists()确认文件存在，同时确保权限申请成功。

三、额外的WebView优化配置 #

• 开启硬件加速：部分低端设备关闭硬件加速会导致媒体解码失败，在窗口或WebView中开启：

  var mainWin = Ti.UI.createWindow({
    backgroundColor: "#fff",
    hardwareAccelerated: true
  });
  

• 自定义WebChromeClient：如果需要支持全屏播放，自定义WebChromeClient处理相关回调，确保WebView能正确处理媒体播放的生命周期：

  webView.setWebChromeClient({
    onShowCustomView: function(view, callback) {
      // 这里添加全屏播放的逻辑，比如将view添加到窗口
    },
    onHideCustomView: function() {
      // 退出全屏的恢复逻辑
    }
  });
  

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