点击后退按钮后 HTML5 视频在 Safari 中消失

Question

我的一个客户报告了 OSX/Safari 6.2 中的一个问题，其中 MaxCDN 托管的视频在初始页面加载时加载良好，但在单击离开页面并使用浏览器的“后退”按钮返回后，视频为空白.

我已经尝试了广泛地复制该问题，但在三台独立的 Mac 上以及使用 Browserstack 进行测试后，我只是没有看到它。然而，它似乎影响了客户办公室中的所有计算机。

这是一个出现相同问题的单独测试:http://artworking.uk/tmp/video.html

当我的客户点击页面顶部的链接然后返回时，视频就不会显示。

遗憾的是，谷歌搜索没有发现任何问题。

完整代码在这里:

<video loop autoplay>
    <source type="video/mp4" src="http://p.epoch-vod-cdn.epochdesign.netdna-cdn.com/vod/epoch-vod-cdn.epochdesign/background.mp4">
    <source type="video/webm" src="http://p.epoch-vod-cdn.epochdesign.netdna-cdn.com/vod/epoch-vod-cdn.epochdesign/background.webm">
    <object class="background__video" type="application/x-shockwave-flash" data="http://p.epoch-vod-cdn.epochdesign.netdna-cdn.com/vod/epoch-vod-cdn.epochdesign/flashmediaelement-cdn.swf">
        <param name="movie" value="http://p.epoch-vod-cdn.epochdesign.netdna-cdn.com/vod/epoch-vod-cdn.epochdesign/flashmediaelement-cdn.swf">
        <param name="wmode" value="opaque">
        <param name="flashvars" value="file=http://p.epoch-vod-cdn.epochdesign.netdna-cdn.com/vod/epoch-vod-cdn.epochdesign/background.flv&amp;isvideo=true&amp;controls=false&amp;autoplay=true">
    </object>
</video>

Answer 1

我不是这方面的技术专家。我遇到了类似的问题，通过我的研究，我认为我已经找到了解决方案。它对我有用，也许你可以尝试一下，并让论坛知道结果。

我的问题:当我单击后退按钮时，视频未加载。 我的观察:这不是视频的问题。这是触发页面加载的浏览器问题。这是基于我的 init 函数没有被触发的事实。

解决方案

    $(window).bind("pageshow", function(event) {
      if (event.originalEvent.persisted) {
          window.location.reload();
      }
    });

应用该解决方案后，页面已正确加载

引用:Mobile Safari back button

希望这有帮助。