0

Jquery Mobile を使用し、マルチページ テンプレートを適用してモバイル Web サイトを作成しました。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());
});

しかし、このチートは機能せず、どうすればよいか非常に迷っています。この Web サイトを Safari (Ipad) と Firefox (Android) でテストしましたが、いずれも最新のビデオをロードしません。Safari ではページを更新して最新のビデオを表示する必要がありますが、Firefox では常にキャッシュされたビデオが表示されます。どんな助けでも大歓迎です。

事前に感謝します。

4

1 に答える 1

0

私は2つのステップで問題を解決しました：

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 に答える