0

我使用 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 总是显示缓存的视频。任何帮助，将不胜感激。

预先感谢。

4

1 回答 1

0

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

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>
于 2013-08-01T15:17:05.733 回答