基于React Native Web的Tizen OS本地MP4视频真机无法播放求助

补充必要权限 #

当前你的config.xml仅配置了互联网权限，访问本地媒体文件需要添加存储权限，同时明确允许本地文件访问：

<tizen:privilege name="http://tizen.org/privilege/mediastorage"/>
<tizen:privilege name="http://tizen.org/privilege/externalstorage"/>
<access origin="file:///" subdomains="true"></access>

验证视频编码兼容性 #

Tizen真机对MP4编码的兼容性比模拟器严格，必须确保视频符合以下标准：

• 视频编码：H.264 Baseline Profile（Level 3.0及以下适配性更好）
• 音频编码：AAC-LC
• 分辨率：不超过设备支持的最大分辨率（建议1080p及以下）
  可以用FFmpeg重新编码视频，示例命令：

ffmpeg -i input.mp4 -c:v libx264 -profile:v baseline -level 3.0 -c:a aac -b:a 128k output.mp4

修正本地文件路径 #

React Native Web打包后，真机上的资源路径可能和模拟器不一致：

• 将视频放在项目public目录下，使用相对路径访问（如./splash.mp4）
• 若需精准获取路径，可借助Tizen文件API：

function getLocalVideoPath() {
  const documentsDir = tizen.filesystem.resolve('documents');
  return `${documentsDir.fullPath}splash.mp4`;
}

排查视频加载错误 #

给HTML5 <video>标签添加错误监听，定位具体问题：

<video autoPlay muted loop>
  <source src="./splash.mp4" type="video/mp4">
</video>
<script>
  document.querySelector('video').addEventListener('error', e => {
    console.error('视频加载失败:', e.target.error.code);
  });
</script>

确认打包配置 #

确保Webpack将MP4文件纳入构建产物，在webpack.config.js中添加规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.mp4$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'assets/videos/'
          }
        }
      }
    ]
  }
};

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