嵌入式HTML 5视频存储在缓存中,但不会显示在iPad 2上

时间:2012-08-22 19:05:01

标签: ipad html5 caching video offline

我正在为iPad 2创建一个包含视频内容的离线网络应用程序。首次加载页面时,视频显示正常。但是当我重新加载页面时,视频的播放按钮就会崩溃。

我已进入设置> Safari>高级>网站数据,当然,视频在缓存中...所以问题似乎是它没有从缓存中检索。

我的HTML代码段:

    <html manifest="cache.manifest">
    ...
        <video width="320" height="240" controls="controls">
            <source src="videos/movie.mp4" type="video/mp4" />
        </video>

我的cache.manifest片段:

    CACHE MANIFEST
    # Updated 2012-08-22 19:49:00
    index.php
    ...
    videos/movie.mp4

为了更好的衡量,我的.htaccess片段:

    AddType text/cache-manifest .manifest
    AddType video/mp4 .mp4

有没有人有任何想法?

2 个答案:

答案 0 :(得分:4)

遗憾的是,这不是一个答案,但经过20个小时的连续搜索和测试,以解决完全相同的问题,我可以告诉你我现在在哪里。

这似乎是ipad iOS特有的问题,无论视频/声音文件的大小是多少,它都不会在缓存的文件上绘制,尽管它们显然是缓存的,并且在第一次加载时它会播放文件OK。

我尝试过制作最小的视频。 我已经看过包装在本机应用程序中,但这不是出于交付原因的选项。 我尝试使用javascript强制在页面加载时重新加载视频.src。 我已经尝试了清单文件的所有可能变体。 看着我可以忍受的所有Apple开发者文档。

在阅读了数百个从未真正完成的帖子之后,我认为除了让客户购买Android平板电脑之外,答案是使用本地数据库以二进制形式存储视频,以便在应用需要时进行检索。不幸的是,我仍然在寻找这方面的例子,但仍然无法找到任何细节。本地保存文本/数字数据不是问题。我只是不知道是否可以存储原始文件数据并在本地数据库中检索它。

对不起它不是你所追求的,但希望它可以帮助你找到更少的方向。

更新但进展不大。我决定使用base64 ecoded mp4并将文本粘贴到一个简单的xml文件中。我的应用程序将读取此xml视频数据并使用视频标记SRC。这大约是一个4MB的字符串。

SRC="data:video/mp4;base64,AAAAA /...../ AA" 

这在Chrome中运行良好。当我在Ipad上使用它时,好处是我没有将播放按钮划掉并试图播放然后闪现一条消息无法完成此操作。

答案 1 :(得分:0)

我在iPad上播放视频时遇到了一些相关问题。这是一个HTML小部件,它将驻留在iBooks文件中。我的问题是我无法让视频倒带,所以当你回到那个屏幕时,视频会被卡在最后(或者如果你足够快地回来,它仍在播放。)

我想出的解决方法是加载不同的视频,然后重新加载我想播放的视频。这很丑陋,但它有效,它可能为您的问题提供解决方法。

var sources = videoEl.getElementsByTagName('source');
sources[0].src = "assets/TeethMouth_Anim_Part3_03.mp4"; // Load some other video into the source, in my case, a video that I'm playing later in the presentation.
videoEl.load();
sources[0].src = "assets/TeethMouth_Anim_Part1_03.mp4"; // Then reload the video I want to play.
videoEl.load();

虽然现在我看到这个帖子已经有一年了,所以它可能不再是一个问题了。不过,我以为我会发布它。