我的PhoneGap和Chrome Apps CLI都設置了簡單的視頻播放應用程序（都使用Cordova），它們包含一系列短視頻教育視頻，並且作爲網站和應用程序都需要在Android/iOS上進行離線使用。在PhoneGap/Chrome應用程序中存儲視頻以供離線使用

到目前爲止，我發現Chrome Apps捆綁文件的總大小不能超過10mb，PhoneGap Build不能超過40mb，因此兩者都需要在本地下載和存儲文件以備後用。視頻需要在WebView瀏覽器中打開並播放 - 熱點觸發JS來更改HTML5視頻src。（AppCache和其他HTML5存儲已成爲移動設備的問題，他們似乎無法達到三位數的存儲空間）

有沒有人有幸能夠在本地存儲文件的Cordova/PhoneGap/Chrome App API要達到這個規格？

任何意見/幫助/指向正確的方向讚賞！

來源

2014-02-26 Daniel Sailes

當應用程序初次初始化時，您可以使用phonegap filetransfer下載視頻並存儲本地系統 –

這些文件是否可以在應用程序中重複使用？在離線模式下？ –

是的，直到時間在你的文件系統中，你可以使用它 –

您可以在科爾多瓦爲此應用程序（並很快在Chrome科爾多瓦應用程式）。您需要最新版本的File（1.0.1）和FileTransfer（0.4.2）插件。

使用這些，您可以使用FileTransfer.download()下載視頻，並且您可以使用文件訪問該文件並創建<video>標籤來播放視頻。

在播放它們之前，您需要在文件條目上使用.toNativeURL()方法。 File插件的最新版本使用文件的自定義URL方案，這不幸與HTML <video>標籤不兼容。

這是我用它來測試這些方法的交互測試代碼：

var filename = "small.mp4"; 
var videoURL = "http://techslides.com/demos/sample-videos/small.mp4"; 

requestFileSystem(PERSISTENT, 0, function(fileSystem) { 
    var ft = new FileTransfer(); 
    ft.download(videoURL, fileSystem.root.toURL() + "/" + filename, function(entry) { 
     var videoElement = document.createElement('video'); 
     videoElement.controls = 'controls'; 
     videoElement.src = entry.toNativeURL(); 
     document.videoElementById("output").appendChild(imgElement); 
    }); 
});

更新

與文件的插件（1.1.0），您不再需要的最新版本使用.toNativeURL()獲取可用作視頻的src屬性的URL。標準.toURL()方法將返回這樣一個URL。

來源

2014-03-01 03:27:56

謝謝你。即使與看起來精簡的文檔相比，這種方法似乎也行得通！對於toNativeURL提示+1也是如此:) –

嗯，它有點忽略了requestFileSystem和下載都可能拋出錯誤的事實，它不會將文件存儲在除文件系統根目錄以外的任何地方，但除此之外它是相當完整的 –

下面是使用PhoneGap的文件傳輸

function downloadFile(){ 
    window.requestFileSystem(
       LocalFileSystem.PERSISTENT, 0, 
       function onFileSystemSuccess(fileSystem) { 
       fileSystem.root.getFile(
          "test.html", {create: true, exclusive: false}, 
          function gotFileEntry(fileEntry){ 
          var Path = fileEntry.fullPath.replace("test.html",""); 
          var fileTransfer = new FileTransfer(); 
          fileEntry.remove(); 

          fileTransfer.download(
             yourserverurl, 
             Path + "yourfilename+extension", 
             function(theFile) { 
             window.localStorage.setItem("FilePath", theFile.toURL()); 
             console.log(theFile.toURL()); 
             }, 
             function(error) { 
             console.log("upload error code: " + error.code); 
             } 
             ); 
          }, 
          fail); 
       }, 
       fail); 

} 
function fail(error) { 
    console.log(error.target.error.code); 
}

您可以的localStorage存儲指定fileurl進一步usuage下載文件的代碼

來源

2014-02-27 10:09:56

因此，我把test.html替換爲視頻的URL--比如說http://google.com/video.mp4--文件video.mp4會可以使用嗎？我很難讓這種方法以這種方式工作。也許我把它設置得不正確 - 我很快就會嘗試這種方法。謝謝 –

非常感謝您的回答，我最終使用了替代方法，因爲此方法出現了一些錯誤 - 但是使用localStorage存儲位置並檢查文件是否已經被下載過！ –

讓我知道錯誤，所以我可以修復，因爲我nt測試代碼 –

在PhoneGap/Chrome應用程序中存儲視頻以供離線使用

回答

更新

相關問題