0

我创建了一个离线 Web 应用程序，它在远程 chrome 调试控制台中显示为正确缓存所有文件，并显示它可以正确离线。清单中列出的视频显示为下载到缓存中，但是当我打开飞行模式并尝试播放时，它显示一个空视频。

如何让视频离线播放？

缓存清单

CACHE MANIFEST

CACHE:
main.js
video.mp4

清单的 HTML 链接

<html manifest="cache.manifest">

有没有办法做到这一点？

4

1 回答 1

0

出于某种原因，唯一可以播放缓存视频的移动浏览器是 Android 上的 Firefox。但是，有一个解决方案（对于Safari iOS8+、Chrome、Firefox - 我还没有测试过 IE） -他们甚至可以离线播放 objectURL 中的视频 blob！

你要做的是：

  1. 创建索引数据库
  2. 在数据库中查找存储的视频request = transaction.objectStore( "myobjectstorename" ).get( savedId )
  3. 检查返回，如果有，则进行第 5 步，否则进行第 4 步if ( !event.target.result ) downloadVideo()
  4. 通过运行XMLHttpRequest GET请求下载视频并设置响应类型videoRequest.responseType = "blob";
  5. 下载后，从数据库中检索它（上面的步骤 2）并将其放入文档中：

将页面作为对象 url 放入的代码：

var URL = window.URL || window.webkitURL;

//Make into a data URL
var videoURL = URL.createObjectURL( videoFile) ;

//Set video src to ObjectURL
document.getElementById( id ).setAttribute( "src", videoURL );

从这里修改了代码：

http://www.misfitgeek.com/html5-off-line-storing-and-retrieving-videos-with-indexeddb/

于 2015-09-17T20:27:40.740 回答