使用WebView從本地文件播放視頻React Native

所以，這裏是重點。我在我的設備上下載了一些文件。因爲可以是視頻，mp3或pdf，所以在webview上顯示它可能會很好，所以它的預覽系統會爲我完成這項工作，而且我無需下載任何外部媒體播放器。使用WebView從本地文件播放視頻React Native

我有這樣的代碼讓我們假設這條道路：

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。

任何幫助將真正感激！在此先感謝

來源

2017-07-16 Ruffeng

我得到了它播放視頻！這很粗糙，但最後，我明白了。 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我注入的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

我希望這個答案可以幫助，如果有人被困在相同的情況。乾杯！

來源

2017-07-19 15:07:16 Ruffeng