Question

我在我的iPhone手机屏幕应用中嵌入了YouTube视频

e.g

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

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

之前是否有人遇到此行为或找到了解决方法。

非常感谢。

安德鲁

Answer 1

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

使用滚动条内的视频缩略图绘制图像
在缩略图上放置播放按钮
处理点击事件以在滚动条之外显示视频

使用这样的代码：

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();
}

Answer 2

这是一个很好的教程，保存了我的一天

http://eisabainyo.net/weblog/2012/01/24/embed-a-youtube-video-iframe-in-phonegap-app/

我也发布一些代码以便快速访问。

<html>
    <head>
        <title>YouTube video</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <script src="phonegap-1.2.0.js"></script>
    </head>
    <body>

        <iframe width="560" height="315" src="http://www.youtube.com/embed/9HDeEbJyNK8" frameborder="0" allowfullscreen></iframe>

    </body>
</html>

然后在Phonegap.plist中进行以下更改

![MediaPlaybackRequiresUserAction: NO
AllowInlineMediaPlayback: YES
OpenAllWhitelistURLsInWebView: YES
ExternalHosts
          *.youtube.com
          *.ytimg.com][2]

视频也将在您的模拟器上播放。

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

2 个答案: