Phonegap and iPhone with embedded youtube video, transformation scrolling issue
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
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();
}
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.
加载中,请稍侯......
精彩评论