Question

我的页面中有很多链接，每个链接都有两个属性，格式为＆amp; SRC。

<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>

当我点击任何视频链接时，我的浏览器网址会像这样更改

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进行内容生成。在这种情况下，弹出窗口是更好的解决方案。与dialog（作为另一个页面，并且是另一个页面）不同，弹出窗口是单个页面的一部分，因此我在服务器端生成中具有更好的可用性。

警告：

我的示例仅适用于firefox浏览器。我只使用了ogg视频源。视频来源取自this帖子。

$ .mobile.changePage（）更改没有数据的页面（白屏）？

1 个答案: