3

私のページには、それぞれが format と src の 2 つの属性を持つ多くのリンクがあります。

<a class="play" src="'.$p['video_path'].'" format="'.$p['video_type'].'"></a>

クリックしたものは2つの属性を取得し、jsでHTMLを次のように作成します。

$(".play").live('click',function() {
   var src = $(this).attr('src');
   var fmt = $(this).attr('format');
   var html = '<video width="200" height="240" controls> <source src="'+src +'" type="video/'+ fmt +'"> </video>'; 
   $("#myVideoDiv").html(html);
   $.mobile.changePage( $("#myVideoDiv"), { transition: 'pop' } );
 });
<div data-role="dialog" id="myVideoDiv"></div>

動画リンクをクリックすると、ブラウザの URL が次のように変わります

http://pp.local/maps/maps/40295472#&ui-state=dialog

しかし、白い画面だけを表示するものはありません。動作してい$("#myVideoDiv").html( html );ますが、Firbug を介して HTML を見ることができます。Firebug にエラーや警告はありません:(

基本的に私がする必要があるのは、以下のコードのような通常のjquery UIで行うように、jqueryモバイルダイアログで各ビデオを表示したいということです。ここでも同じことをする必要がありますが、jqueryモバイルダイアログを使用します。

  $(".watchVideo").live('click', function() {
    if( $('div.ui-dialog').length ) {
      $('div.ui-dialog').remove();
    }
    var path  = $(this).attr('rel');
    var title = $(this).attr('title');        
    var $dialog = $('<div>', {
        title: 'Title'
    }).dialog({
        autoOpen: false,
        modal: true,
        width: 600,
        height: 500,
       closeOnEscape: false
    });

    var tab = '<table id="video_player" style="margin: 10px 10%;"><tr><td><object codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><param value="'+path+'" name="src"><param value="true" name="autoplay"><param value="true" name="controller"><embed pluginspage="http://www.apple.com/quicktime/download/" controller="true" style="height:300px;width:400px;background-color:#D9EBFB" autoplay="true" target="myself" src="'+path+'"></object></td></tr></table>';
    $('<div id="updateContent">').html( tab ).appendTo( $dialog );
    $dialog.dialog('open');
    return false;    
});
4

1 に答える 1

2

問題の再現に成功しましたが、残念ながら、これが問題であると 100% 確信することはできません。ページ/ダイアログの設定にエラーがあると思います。

私の作業例を見て、アプリで使用してみてください: http://jsfiddle.net/Gajotres/5REkc/。この例では、ダイアログをビデオ コンテナーとして使用します。

$('#index').live('pagebeforeshow',function(e,data){   
    $('#show-video').live('click', function(e) {
        $('#video-content').append('<video width=450px height=300px controls="controls"><source src="http://dev.swinginsam.com/_files/testvid_01.ogv" type="video/ogg"></video>');  
        $.mobile.changePage("#second", { transition: "slide"});
    });        
});

また、別の例を作成しました。これははるかに優れており、ポップアップをビデオ コンテナーとして使用します。ダイアログ ポップアップとは異なり、ビデオ タグに合わせてサイズが変更されます: http://jsfiddle.net/Gajotres/vscrU/。

$('#index').live('pagebeforeshow',function(e,data){   
    $('#show-video').live('click', function(e) {
        $('#popup-video').append('<video width=600px height=300px controls="controls"><source src="http://dev.swinginsam.com/_files/testvid_01.ogv" type="video/ogg"></video>');  
        $('#popup-video').popup("open");
    });        
});

<div data-role="popup" id="popup-video" data-tolerance="15,15" class="ui-content"</div>

データ許容範囲はここにあるため、ポップアップにパディングを含めることができます。それがないと、ビデオ プレーヤーがポップアップ コンテナからあふれ出します。

もう 1 つ、コンテンツ生成に php を使用していることがわかります。この場合、ポップアップははるかに優れたソリューションです。ダイアログ（別のページとして機能し、別のページである）とは異なり、ポップアップは単一のページの一部であるため、サーバー側の生成ではるかに使いやすくなっています。

警告：

私の例は、Firefox ブラウザーでのみ機能します。私は ogg ビデオ ソースのみを使用しました。ビデオソースはこの投稿から取得されます。

于 2012-12-20T11:46:12.123 に答える