WebViewでローカルファイルからビデオを再生するネイティブ

ここにポイントがあります。私はいくつかのファイルを自分のデバイスにダウンロードしています。ビデオ、mp3またはpdfなので、プレビューシステムが私のために働くように、webviewに表示するのがいいかもしれませんし、外部メディアプレーヤーをダウンロードする必要もありません。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 }} 
      />

は私の問題は、私はファイルをロードしようとしているとき、それは常に、このエラーが発生している：

私はそれがだ疑いをウリの経路についてrequireを指定すると、エラーもレンダリングされます（モジュールは解決できません）。

このアプリはAndroid用ではなくIos用です。

本当にありがとうございます。ありがとうございます

出典

2017-07-16 Ruffeng

で動画を再生するのに役立ちますreact-native-videoようNPMパッケージを使用してください！それは大まかでしたが、ついにそれを手に入れました。 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からvideo/image/mp3をロードしなければなりませんでした。これはwebviewを呼び出すときに前回読み込んでいます。この例では、私の文書が私の装置の中に保存されているフォルダを指すためにRNFetchBlobを使用します。

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この溶液で提供：

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

3）最後に、これは、コードの結果です。 https://github.com/wkh237/react-native-fetch-blob/issues/197

誰かが同じ状況に陥っている場合、この回答が役立つことを願っています。乾杯！

出典

2017-07-19 15:07:16 Ruffeng