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

Posted 2023-02-23

技术标签:

【中文标题】使用 WebView React Native 播放本地文件中的视频【英文标题】：Play video from local files with 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。

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

【问题讨论】：

【参考方案1】：

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

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

<WebView source= html: `<html>
    <body>
       <video   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   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！

以上是关于使用 WebView React Native 播放本地文件中的视频的主要内容，如果未能解决你的问题，请参考以下文章

React-native：如何自动保存 webview 当前网页？