Phonegap和iPhone嵌入了youtube视频,转换滚动问题

Question

我在我的iPhone phonegap应用程序中嵌入了youtube视频

例如

<embed id="yt" src="http://www.youtube.com/v/myvidid" width="300" height="199"></embed>

这一切都很好,因为iPhone将这些视为YouTube视频,并会插入海报图片,并在点击时调用youtube应用程序.然而问题是这些youtube嵌入在可滚动的内容区域内,我使用CSS转换通过触摸滚动来上下移动.当用户滚动该区域时,视频在我的内容之上保持静止在固定位置.无论我添加到嵌入的CSS中,似乎都没有改变这种行为.

有没有人遇到过这种行为或找到了解决方法.

非常感谢.

安德鲁

Answer 1

我有同样的问题,不得不使用以下解决方法:

1. 在滚动条内使用视频缩略图绘制图像
2. 将播放按钮放在缩略图上
3. 处理单击事件以在滚动条之外显示视频

使用这样的代码:

var videos = [];
$('#scroller object').each(function(i,el){
    var movie = $(el).attr("data").replace(/^.*youtube\.com\/v\//,"");
    var width = $(el).attr("width");
    var height = $(el).attr("height");
    var html = '<object style="margin-left:12px;margin-top:10px;" id="video" width="296" height="222" data="http://www.youtube.com/v/'+movie+'" type="application/x-shockwave-flash">' + 
    '<param name="allowfullscreen" value="true" />'+
    '<param name="wmode" value="transparent" />'+
    '<param name="src" value="http://www.youtube.com/v/'+movie+'" />'+
    '</object>';
    videos.push(html);
    var thumb = "http://img.youtube.com/vi/"+movie+"/0.jpg";
    $(el).replaceWith('<div id="video-'+i+'" style="width:240px;height:184px;background:url('+thumb+') no-repeat;background-size: 100%;"><div class="play-button"></div></div>');
    $("#video-"+i).click(function(e,el){loadVideo(this)});
});

付费按钮的CSS代码

.play-button {
    position: absolute;
    width: 240px;
    height: 184px;
    background: url(images/youtube_play.png) no-repeat;
    background-size: 100%;
    background-position: center center;
}

loadVideo函数模型:

function loadVideo(el){
    var id = el.id;
    if (!id) {
        //play button clicked
        id = $(el).parent()[0].id;
    }
    id = id.replace("video-","");
    var html = videos[id];
    //html contains <object> tag
    $('#video-overlay').html(html).show();
}