Question

所以这就是重点。我在我的设备上下载了一些文件。因为可以是视频，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。

任何帮助都会非常感激！提前致谢

Answer 1

您无法在网页浏览中播放视频。请使用像react-native-video这样的npm包，它可以帮助您播放包含更多控件的视频

Answer 2

我明白了！这很粗糙，但最后，我明白了。 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，所以我利用浏览器中的媒体播放器。 2）我不得不从bundle.js加载视频/图像/ mp3。当你调用webview时，它正在加载前一个。在这个例子中，我使用RNFetchBlob来指向我的文档存储在我的设备中的文件夹。

  const html = `<script src="${RNFetchBlob.fs.dirs.MainBundleDir}/bundle.js"></script> `;
<WebView
   source={{ baseUrl: RNFetchBlob.fs.dirs.DocumentDir, html,</Webview>

3）最后，这是代码结果：

 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

我希望如果有人遇到同样的情况，这个答案会有所帮助。干杯！

Answer 3

this maybe help you, using html video/audio tag

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

3 个答案: