I'm sorry to come back to this topic again, but i'm really frustrated!! I've read every resource i've found, googling around the web, but i couldn't come up with a definitive answer to my problem.
Problem description
I'm creating an iphone app with phonegap 1.0. In this app, one tab is dedicated to a rss feed from my youtube channel and i want my users to be able to play these videos, after clicking on a specific entry.
Question: is it possible? best solution would be to play the video inside the app, but displaying a thumbnail image and redirecting the user to native youtube app is also acceptable (even though in this case i want the control back to the original app when youtube finishes to play the video).
Tried solutions
Searching on the web I found several solutions and people say that these solutions work for them, but none of them work for me!
use an "object" tag, i end up with a white screen
<object id="video" width="296" height="100%" data="http://www.youtube.com/v/gDjb9RVMF4c" type="application/x-shockwave-flash">
<param name="allowfullscreen" value="true" />
<param name="src" value="http://www.youtube.com/v/gDjb9RVMF4c" />
</object>
using an "embed" tag, i end up with a white screen
<embed src="http://www.youtube.com/v/gDjb9RVMF4c" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="280" height="100%"></embed>
i also tried a "video" tag, but as far as i understood, this is still not possible.
I'm really sorry if i missed a solution already written somewhere, but trust me ... i did my homework before askying :-)
Thx!!
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
Video will play on your Simulator Also.
Apart from using <iframe> ... </iframe> you also need to set the property OpenAllWhitelistURLsInWebView to YES in your PhoneGap.plist. This would show and play the video inside the PhoneGap application itself. It is tried and tested.
You could try embedding the YouTube video as an iframe, I believe that is the recommended way to do it now:
http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html
<iframe src="http://www.youtube.com/embed/VIDEO_ID" class="youtube-player" type="text/html" width="640" height="385" frameborder="0">
</iframe>
Here is a component I've end up using in my app. Done with a help of YouTube iFrame API.
Related
Using Chrome browser, when I share a link from my website on facebook, the 'preview' is a video in mp4 format i.e not swf format. The problem is that a download button is showing up on the video player on facebook.
Based on this post I was able to remove the download button on my website using controlsList="nodownload" attribute, but I still can't remove it from facebook posts.
As far as I know, this video preview is built based just OG metatags, which I believe are correct:
<meta property="og:video:url" content="https://cdn.domain.com/path/to/video/file.mp4" />
<meta property="og:video:secure_url" content="https://cdn.domain.com/path/to/video/file.mp4" />
<meta property="og:video:width" content="768" />
<meta property="og:video:height" content="432" />
<meta property="og:video:type" content="video/mp4" />
Question: Is there anything I can do to fix this or does it depends 100% on facebook?
Note: Due to privacy policies I can't share here an example but here is an example with similar OG metatags, post it on your facebook timeline and you'll see the download button as shown in this screenshot example below : https://i.stack.imgur.com/mck0N.png
Thanks.
Question: Is there anything I can do to fix this or does it depends 100% on facebook?
This is entirely on Facebook's end.
You've provided Facebook with the URL to your video content. How they present it is up to them.
Thanks to given attention on my question
I am quite new to use add this, i want to share my image on twitter and Pinterest but am not able to do this,i used meta tag for the facebook and twitter.
one thing more i have created app on twitter and facebook which provide me appid and api key where i use these.
I goggled a lot but i did not get reliable source which can help me,
Please provide any solution for this problem
my meta tag are fallowing
for facebook
<meta name="og:site_name" content="Street2media" />
<meta name="og:title" content="Street2media Image" />
<meta name="og:description" content=" Watch the AddThis Tour video this the image of a city .Download this city image from the site s2m." />
<meta name="fb:app_id" content="[645268322218331]" />
<!-- This is the api key for the twitter-->
<meta name="og:description" content="StreetToMedia Image to show" />
<!-- This is the image that will be associated with this content. It should be greater than 50x50 -->
<meta name="og:image" content="#ViewBag.FileContent" />
<meta name="og:url" content="http://127.0.0.1:81/"/>
and for twitter
Thanks
You seem to be doing everything just fine. I don't know what #ViewBag.FileContent stands or but if its a URL to an image available on the internet you should be fine.
I did however notice that your og:url is 127.0.0.1:81 which doesn't seem to be a URL available to the public internet. Facebook cannot fetch open graph data from a site that is only available to your local space. so you'll have to push the code to a live server to test it.
When you share a YouTube link on FB it automatically embeds the YT player into your wall.
At first I thought it is an FB effort, but then I noticed this happens with many videos websites (that FB probably never heard of), even from smaller countries.
So my question is, what guidelines must I follow for my video website, in order for FB to detect my player and automatically embed it in ones wall after sharing a link to that video?
Keep in mind I'm not talking about using the API. I'm talking about a user sharing a link to the page that contains that video.
See the Attaching Audio and Video Data section of Facebook's OpenGraph Protocol, for example:
<html xmlns:og="http://ogp.me/ns#">
<head>
...
[REQUIRED TAGS]
<meta property="og:video" content="http://example.com/awesome.flv" />
<meta property="og:video:height" content="640" />
<meta property="og:video:width" content="385" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
...
</head>
I'm testing Facebook audio share functionality and having an issue with the image not showing up.
So this is what I have.
<meta name="description" content="audio_description" />
<meta property="og:image" content="http://domain.com/image.jpg" />
<meta property="og:audio" content="http://domain.com/audio.mp3" />
The audio does show up, so that part is fine.
However, the image that is supposed to go on the left of the audio doesn't.
Do I need to do something special?
I also tried
<link rel="image_src" href="http://domain.com/image.jpg" />
Same result.
I'm expecting the output to look something like this http://www.allfacebook.com/wordpress/wp-content/uploads/2010/03/share-song.jpg
Thanks,
Tee
If I am trying to make my site sharable through digg and facebook, can i hard set which section of the page will be used as the short description? thanks
For Facebook you'll need to use the "share button". This can be customised, but will always be something simple like this:
<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
The Facebook developers wiki states that the short description it publishes will be taken from the "description" meta tag in the head of the page. Likewise, Facebook will respect meta tags for "title", which will override the tag, and a link tag for an image. The example they give is:
<meta name="title" content="Smith hails 'unique' Wable legacy" />
<meta name="description" content="John Smith claims beautiful football is the main legacy of Akhil Wable's decade at the club. " />
<link rel="image_src" href="http://www.onjd.com/design05/images/PH2/WableAFC205.jpg" />
Be sure to check out the wiki page for details of how to specify media such as video and audio.
As for Digg, I've never worked with it, but I'd assume that it would be similar to Facebook. At the very least, I would expect it to comply with the and tags.