Phonegap 和带有嵌入式 YouTube 视频的 iPhone，转换滚动问题

发布于 2024-11-06 13:31:46 字数 434 浏览 6 评论 0原文

我正在将 YouTube 视频嵌入到我的 iPhone PhoneGap 应用程序中，

例如，

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

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

有没有人以前遇到过这种行为或找到解决办法。

非常感谢。

安德鲁

原文

I'm embedding youtube videos within my iPhone phonegap app

e.g

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

This all works fine as the iPhone recognises these as a youtube videos and will insert the poster image and also invoke the youtube app upon click. However the problem is these youtube embeds are within a scrollable content area, for which I use CSS transformations to move up and down via touch scroll. When the user scrolls the area the video stays static in a fixed position on top of my content. No matter what CSS I add to the embeds, nothing seems to change this behavior.

Has anyone come across this behavior before or found a fix.

Many thanks.

Andrew

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

人疚 2024-11-13 13:31:46

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

在滚动器内绘制带有视频缩略图的图像
将播放按钮放在缩略图上
处理单击事件以在滚动器外部显示视频

使用如下代码：

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

付费按钮

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

loadVideo 函数模型的 CSS 代码：

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

I have the same issue and had to use following workaround:

draw images with video thumbnails inside scroller
put play button over thumbnail
handle click event to show video outside of scroller

With code like this:

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 code for pay button

.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 mockup:

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

回复收藏 0 原文

〃安静 2024-11-13 13:31:46

这是一个很好的教程，拯救了我的一天

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]

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

Here is a nice tutorial Which Saved my Day

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

Also i m posting some codes For a quick Access.

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

Then make the following changes in Phonegap.plist

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

Video will play on your Simulator Also.

回复收藏 0 原文

~没有更多了~