使用 WebView React Native 播放本地文件中的视频答案

【问题标题】：Play video from local files with WebView React Native使用 WebView React Native 播放本地文件中的视频
【发布时间】：2017-07-16 15:40:37
【问题描述】：

这就是重点。我在我的设备上下载了一些文件。因为可以是视频、mp3 或 pdf，所以将其显示在 webview 上会很好，因此它的预览系统将为我完成工作，我无需下载任何外部媒体播放器。

我有这个代码让我们假设这条路径：

const path = 'file:///Users/MyUser/Library/Developer/CoreSimulator/Devices/D18AD5B6-22D1-4F57-A162-8A1C5DBCAD7A/data/Containers/Data/Application/BF9347EB-8EDF-45CB-9CFD-08C0C8BE3D5C/Documents/song.mp3';


 <WebView
            javaScriptEnabled
            source={{ uri: path }}
            style={{ marginTop: 0 }}
          />

我的问题是当我尝试加载文件时，它总是会引发此错误：

我怀疑这是关于 uri 的路线。使用 require 它也会呈现错误（无法解析模块）。

此应用仅适用于 iOS，不适用于 Android。

任何帮助将不胜感激！提前致谢

【问题讨论】：

标签： ios react-native webview react-native-ios

【解决方案1】：

我明白了！！！这很粗糙，但最后，我明白了。

我终于用 webview 做到了。我做了什么：

<WebView source={{ html: `<html>
    <body>
       <video width="320" height="240" controls>
           <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            Your browser does not support the video 
       </video>
    </body>
</html>` }} />

有了这个，感谢@marx_tseng，我在 webview 上注入了 HTML，所以我利用了浏览器中的媒体播放器。

我必须从 bundle.js 加载视频/图像/mp3。它在您调用 web 视图时加载。在此示例中，我使用 RNFetchBlob 只是为了指向我的文档存储在我的设备中的文件夹。
```
const html = `<script src="${RNFetchBlob.fs.dirs.MainBundleDir}/bundle.js"></script> `;
<WebView
source={{ baseUrl: RNFetchBlob.fs.dirs.DocumentDir, html,</Webview>
```

最后是代码结果：

 const html = `<script 
 src="${RNFetchBlob.fs.dirs.MainBundleDir}/bundle.js"></script> `;
 <WebView
 source={{ baseUrl: RNFetchBlob.fs.dirs.DocumentDir, html,
        html: `<html>
                 <body>
                    <video width="320" height="240" controls>
                        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                               Your browser does not support the video 
                     </video>
                  </body>
               </html>`
       }}
 />

这里@plougsgaard 提供了这个解决方案。 https://github.com/wkh237/react-native-fetch-blob/issues/197

如果有人陷入同样的境地，我希望这个答案能有所帮助。干杯！

【讨论】：

【解决方案2】：

您无法在 web 视图中播放视频。请使用像 react-native-video 这样的 npm 包，它将帮助您播放具有更多控件的视频

【讨论】：

我害怕听那个...好吧，我想我会转到这个模块。谢谢@moorthy。
祝你好运。如果有帮助，请接受答案谢谢。 :) 编码愉快！。

【解决方案3】：

this maybe help you, using html video/audio tag

【讨论】：

太棒了@marx_tseng！