javascript - $.mobile.changePage() 更改页面没有数据(白屏)？

Question

我的页面中有很多链接，每个链接都有两个属性，格式和源。

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

它点击了什么我得到它的 2 attr 并像这样在 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 Mobile 对话框中显示每个视频，就像我们在普通 jquery UI 中所做的那样，如下面的代码。我在这里也需要做同样的事情，但使用 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;    
});

Answer 1

我已经成功重现了您的问题，遗憾的是我不能 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>

这里有数据容差，因此弹出窗口可以有一个填充。没有它，视频播放器就会溢出弹出容器。

还有一件事，我可以看到您正在使用 php 生成内容。在这种情况下，弹出窗口是更好的解决方案。与对话框(充当另一个页面，并且是另一个页面)不同，弹出窗口是单个页面的一部分，因此我在服务器端生成方面具有更好的可用性。

警告:

我的示例只能在 firefox 浏览器中运行。我只使用了一个 ogg 视频源。视频源取自this发布。