Question

我使用Jquery Mobile创建了一个移动网站并应用了多页面模板。由于html5视频标记，我在访问显示视频的页面时遇到问题。每当管理员决定记录新样本时，该视频可以由具有完全相同文件名的另一个视频进行更改。

基本上，我有这个JQM页面：

<div data-role="page" id="video-recorded" style="height: 100%">
<div data-role="content" style="height: 100%">  
    <div id="centre" class='centrage other'>
        <p>Recorded video</p>
        <div style="padding-top:10px;">
            <video id="recorded" width='640'  height='360' controls>
                <source id="recorded-mp4" src="http://172.17.0.50/recorded_videos/recorded.mp4" type="video/mp4">
                <source id="recorded-webm" src="http://172.17.0.50/recorded_videos/recorded.webm" type="video/webm">                    
            </video>
        </div>
    </div>
</div>

我可以通过这段代码访问：

$.mobile.changePage("#video-recorded", {    
   transition: "none",
   reverse: false,
   changeHash: true
});

在显示页面之前，我更新了链接，以便浏览器尝试加载最后一个视频记录：

$(document).on("pagebeforeshow",'#video-recorded',function() {
    var d = new Date();
    $("#recorded-mp4").attr("src","http://172.17.0.50/recorded_videos/recorded.mp4?t="+d.getTime());
    $("#recorded-webm").attr("src","http://172.17.0.50/recorded_videos/recorded.webm?t="+d.getTime());
});

但是这种作弊行为不起作用，我很失落该怎么做。我在Safari（Ipad）和Firefox（Android）上测试这个网站，但没有一个加载最新的视频。在Safari上，我需要刷新页面以获取最新视频，而Firefox始终显示缓存的视频。任何帮助将不胜感激。

事先谢谢。

Answer 1

我已经通过两个步骤解决了我的问题：

1）忘记多页面模板并将页面分成不同的html文件。

$.mobile.changePage("./video-recorded.html", {  
    transition: "none",
    reverse: false,
    changeHash: true,
});

这解决了Safari / Android的默认浏览器上的问题，但没有解决Firefox上的问题

2）对于移动Firefox：我添加了一些PHP代码，以便在加载页面时替换标记。因此，我有这样的事情：

<video width='640'  height='360' controls autoplay>         
<?php
$int_rand = rand();
echo "
    <source src='./recorded_videos/recorded.mp4?t=".$int_rand."' type='video/mp4'>
    <source src='./recorded_videos/recorded.webm?t=".$int_rand."' type='video/webm'>
    <source src='./recorded_videos/recorded.ogv?t=".$int_rand."' type='video/ogg'>
";
?>
</video>

Jquery移动缓存与视频标签有关

1 个答案: