I am trying to embed Facebook video into my website. I found steps that would make it work but the problem is, if I open the website in my iPhone or any smartphone the video is not loading at all.
The information I have gathered in embedding Facebook videos is that I have to get the unique id of the video that can just be seen in the browser. Here is the sample code I have:
<object width="400" height="300" >
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://www.facebook.com/v/UniqueVideoId" />
<embed src="http://www.facebook.com/v/UniqueVideoId" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="224">
</embed>
</object>
What else do I need to do to make the facebook video work on iPhone or any smart phone?
You need a video player that isn't flash based, and works on iOS or android.
You could then retrieve the raw video URL from the API and include that in your app
SELECT vid, owner, title, description, src, src_hq, thumbnail_link, embed_html, updated_time, created_time FROM video WHERE owner=me() as an FQL query will return you the details of a video, including the URL of the raw video source for including into your app (src and src_hq).
Related
I am php developer and using facebook api to get newsfeeds/livefeed from my facebook profile into my web application. I am able to get feeds with videos and able to play video on chrome/firefox browser but video is not playing on safari browser. I am using windows 7 64bit OS.
my code is
video id='mySampleMovie2' src='https://fbcdn-video-a.akamaihd.net/hvideo-ak-prn1/v/t42/1555116_1377610509168076_1495472473_n.mp4?oh=37e226b7ab1adfedf02f8890c7c08ffe&oe=52DA4C2E&__gda__=1390020878_738cdcdc6eb7b81abaf7c4db87c345ab' controls></video
how to play/embed facebook api generated newsfeed video on safari browser?
sample fb newsfeed source link:
https://fbcdn-video-a.akamaihd.net/hvideo-ak-prn1/v/t42/1555116_1377610509168076_1495472473_n.mp4?oh=37e226b7ab1adfedf02f8890c7c08ffe&oe=52DA4C2E&__gda__=1390020878_738cdcdc6eb7b81abaf7c4db87c345ab
https://fbcdn-video-a.akamaihd.net/hvideo-ak-prn2/v/t42/1039326_1382677578661369_273818820_n.mp4?oh=c6bd4f5f9a2d072bd709d90b2a70e82a&oe=52DF7640&__gda__=1390385754_b924f0493f1da54afb74114076112bb3
facebook currently uses flash so, if you have the URL you can embed a facebook video into your page using the following code
<object width="400" height="224" >
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://www.facebook.com/v/xxx" />
<embed src="http://www.facebook.com/v/xxx" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" width="400" height="224">
</embed>
</object>
check this post for more information
Facebook Embed Url http://www.facebook.com/v/XXX is not working anymore because of a new facebook page http://www.facebook.com/v/
But You can still use this:
https://www.facebook.com/video/embed?video_id=XXX
You can use iframe tag to play facebook video on an external website.
<iframe src="https://fbcdn-video-a.akamaihd.net/hvideo-ak-prn1/v/t42/1555116_1377610509168076_1495472473_n.mp4?oh=37e226b7ab1adfedf02f8890c7c08ffe&oe=52DA4C2E&__gda__=1390020878_738cdcdc6eb7b81abaf7c4db87c345ab"
width="420" height="345" frameborder="0" allowfullscreen></iframe>
This page shows how to create the embed code for any Facebook video to embed them in external websites.
Is there a way to start the playback automatically on page load?
The best way for me is to use Facebook URL like this: https://www.facebook.com/v2.3/plugins/video.php?allowfullscreen=true&autoplay=true&container_width=800&href=https%3A%2F%2Fwww.facebook.com%2Fredbull%2Fvideos%2F10155801793140352%2F&locale=en_US&sdk=joey
It's better than the embed url. The video fits in viewport, you can control autoplay with a query string/param.
Unfortunately for you Facebook's policies forbid the autoplaying of content (thank god).
I have attempted to track down the actual policy document but it's been drowned out in the SERPS noise of people talking about it being banned on Facebook!! You can find questions that back this notion up on StackOverflow and WebApps.
StackOverflow is the official Facebook developer support channel so their users may know more on the topic.
It's also possible some whizzy jQuery might be able to fake the click, - but facebook updates it's code so often that I doubt any hack would last long.
Best answer is use YouTube or another channel that allows you so share outside their network. Don't rely on a hacky solution for a network that clearly isn't interested in video being shared beyond it's own borders.
Users can easily change the privacy settings on their videos, and Facebook will probably try and disrupt the ability to embed their content if it becomes a popular thing to do.
For Youtube, add &autoplay=1 at the end of the URL used to autoplay the video. For example:
If the URL to get to the video is:
http://www.youtube.com/v/xxx
The autoplay URL is:
http://www.youtube.com/v/xxx&autoplay=1
The above works for Youtube, but Facebook is a little different:
In the embed portion of the code to autoplay the video on your site add the following parameter:
<param name="autoplay" value="true">
This method works on other sites as well, mostly those that use a Flash-based video player.
As of the latest Facebook SDK today, you are able to autoplay videos passively by adding data-autoplay="true" to the div tag of the embed code.
Reference: https://developers.facebook.com/docs/plugins/embedded-video-player
I've just implemented this on my own project and it does work but as of right now it will only play passively (in mute mode). This is a similar experience as what you would see if you were scrolling through your news feed on Facebook. The user has to manually unmute the video.
I hope this helps.
waitforclick
Indicates whether to autoplay the Flash object (false) when allowed.
false does not work in profiles for security and aesthetic reasons,
except after an AJAX call. Default value is true
https://developers.facebook.com/docs/reference/fbml/swf/
U have to change the the example code from the bottom to the the facebook video, like in your provided link explained.
Didnt tried it, but maybe it helps
regards
Since I don't have a video ID, I can't test it, but adding a "play" or "autoplay" parameter may work:
<object width="400" height="224" >
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://www.facebook.com/v/xxx" />
<param name="autoplay" value="true" />
<embed src="http://www.facebook.com/v/xxx" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" width="400" height="224" autoplay="true">
</embed>
</object>
The answers here are slightly outdated, so just the have the updated answer around, you can see the Facebook Documentation for all the details.
TL;DR:
This is how embedding a video from Facebook Looks like:
<html>
<head>
<title>Your Website Title</title>
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your embedded video player code -->
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-show-text="false">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/facebook/videos/10153231379946729/">
How to Share With Just Friends
<p>How to share with just friends.</p>
Posted by Facebook on Friday, December 5, 2014
</blockquote>
</div>
</div>
</body>
</html>
The following html tag lets you set autoplay to true:
<div class="fb-video" data-href="<video-post-url>" data-autoplay="true">
Default value for data-autoplay is of course false.
it shouldn't matter which videos you are embedding. adding the code
&autoplay=1
to the end of the URL of the video you are embedding should resolve the issu and allow the video to play automatically.
My problem is normal issue that may be faced by every developer.
I have a web application developed with ASP.NET MVC2. I have also created a Silverlight 4 application. The View in web application embeds the silverlight application as shown below -
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="../../ClientBin/OmCodeEditor.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
The silverlight application gets some text in textbox which i need in View of my web application.
Any help is greatly appreciated.
Thanks for sharing your valuable time.
Create a Silverlight enabled web service
Reference the web service in your silverlight project and use it.
There are number of tutorials at http://www.silverlight.net,which you might find useful.
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.
I am trying to expose picassa web album by using Picassa web albums.
Following example creates wall with only 2 pictures which represents 2 album main photos:
<object id="o" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="600" height="450">
<param name="movie" value="http://apps.cooliris.com/embed/cooliris.swf" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
<embed type="application/x-shockwave-flash"
src="http://apps.cooliris.com/embed/cooliris.swf"
flashvars="feed=api://picasaweb.google.com/?user=davidinjp"
width="600"
height="450"
allowFullScreen="true"
allowScriptAccess="always">
</embed>
</object>
How it's possible to show all pictures from all albums? Seems like Cooliris does not support this, using Media RSS cross domain issue arises:
<object id="o" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="600" height="450">
<param name="movie" value="http://apps.cooliris.com/embed/cooliris.swf" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
<embed type="application/x-shockwave-flash"
src="http://apps.cooliris.com/embed/cooliris.swf"
flashvars="feed=http://picasaweb.google.com/data/feed/base/user/davidinjp?alt=rss&kind=photo&hl=en_GB&access=public"
width="600"
height="450"
allowFullScreen="true"
allowScriptAccess="always">
</embed>
</object>
Coolris reference:
http://www.cooliris.com/developer/reference/media-site-apis/
#jeffamaphone Thanks, this is what I've done. I have created simple PHP that mirrors feed on my host:
<?php
$content= file_get_contents('http://picasaweb.google.com/data/feed/base/user/USERNAME?alt=rss&kind=photo&hl=en_GB&access=public');
echo $content;
?>
Added crossdomain.xml.
Pointed feed to local PHP mirroring script.
Unfortunately what you want to do doesn't have very good support in the Cooliris embed wall. What is supported (for Picasa) is:
Get photos of user (grid of albums displayed)
Get photos of user from a specific album
Get photos matching a search term
The good news is we have tentatively scheduled these improvements to Picasa support in an upcoming release (though you know how things can change in Software development).
In the mean time, if you have personal hosting available, the dirty work-around is to make a duplicate of the feed, setup crossdomain.xml to work with *.cooliris.com and pull it from there. Not really optimal, but it will work until we add the support you need.
And to get the full out of that code, you should add a &max-results=1000 after the access=public.
It took me 2 hours to get that :D