Generate embed code given any url - javascript

My goal is to take user-submitted urls and generate video embed code. Any ideas on this could be done?
I've seen multiple sites do this including myvidster. Autoembed is a paid option written in php, however I"m using ruby/rails.

Have a look at oEmbed and its associated Ruby gem. It supports Youtube, Vimeo, Hulu, blip.tv out of the box.

If you are writing this yourself you will need to parse the URL for each site you are trying to accept video content from. For instance a Youtube link could be used something like this:
if url.match(/.*\.youtube\.com\/watch\?v=(.{11})/) || url.match(/youtu\.be\/(.{11})/)
%{<iframe width="440" height="275" src="https://www.youtube.com/embed/#{$1}?rel=0&wmode=transparent"></iframe>}.html_safe
else #other video site conditions here
end
Where url is the string passed in by the user and $1 is the the ID you parsed out and the iframe string code is specific to the site you are using.

Related

Change domain name on page load in source code with javascript

I was playing around with urls the other day and i was wondering if there is a way to for example substitute the domain name for a video link on page load
in the source code, while having the original link still interpreted by the browser to play the video correctly.
So for example, if i host an .mp4 on my server with following link:
<source src="https://goofy.com/dogs.mp4" type="video/mp4" label="Low" res="360">
and i would like it to appear in the source code as:
<source src="https://snoopy.com/dogs.mp4" type="video/mp4" label="Low" res="360">
but still having the goofy one played in the player, it it possible ?
(maybe with javascript ?)
What i am trying to achieve here doesn't need to be that advanced, when i meant "scrape" i was just thinking about people opening the inspector manually and simply grabbing the link, in my example:
https://goofy.com/dogs.mp4
So i was rather thinking of some simple javascript letter substitution scheme on pageload that would display some random letters instead of "goofy". Maybe something like this:
var chars = {'a':'b','c':'z','i':'e'};
var enc;
var str = "goofy.com";
window.onload = function() {
enc = str.replace(/[abc]/g, m => chars[m]);
alert(enc);
};
but i think it won't work, as the player will end up playing the url with the wrong domain name. An i'm not that good at javascript, so i'm not sure of what i'm doing either... Feel free to correct me or maybe offer some solution ? thanks.
Per your comment reply, you want to obfuscate the source urls for a video file.
No, modifying the urls in the <source/> DOM elements won't do anything for you. A bot is getting the raw html from your site, so if the original source urls are embedded there you're not going to be able to hide anything.
Moving up the stack a bit, look at how Youtube handles structuring their urls. At its core, they have a js library that handles building out the video urls and video player dynamically at run time. While its highly obfuscated, its not a huge amount of work to discover what the actual video urls are and download them if you want. If someone really wants to get your videos, its not much work to either investigate the page with dev tools in the browser.
And going low-level, its arbitrary to run a packet sniffer like Charles proxy with a man in the middle local SSL proxy service (built in) to look at the requests being sent back and forth and to easily track down the source url that are delivering the video.
You could go back 10 years and try using Flash or some other embedded 3rd party plugin to "encrypt" the video stream but that's stupid and self defeating. If I really want your videos, I'll just play them full screen and record them on my computer.
Hopefully that more thoroughly answers your question.

Parsing in JavaScript for chrome extension

I have a chrome extension that extracts all short url with the form e.g. ini/ini#8012 from any page using a regex.
var regex = /[\w]+.[\w]+#(?:\d*\.)?\d+/g;
What I want to do is to make that short url into a clickable link in my popup window, and parse it into my web app, so clicking any short url in the list would take you to a web app. The web app url is like this
http://192.101.21.1889:8000/links/?user_repo=ini%2Fini&artID=8012&tc=4&tm=years&rows=5&submit=
The user_repo, and ID characters are from the extracted short url. First of all, is this possible? And if it is can anyone point me in the right direction as to what to do?
You can use Content Scripts and inject JavaScript, then perform whatever you want to do.
Readings:
Content Scripts

How to get a videos' html description instead of plain text using youtube api v3

https://www.googleapis.com/youtube/v3/videos?part=snippet&id=O44zOeYcEXs&key={API_KEY}
A url like the above returns a particular videos' information, but the description is plain text. Although when we visit that particular video (https://www.youtube.com/watch?v=O44zOeYcEXs) the description is nicely formatted html.
I've been researching but haven't found any means to extract the complete html description of a video using the API.
Any pointers ?
These are different questions :
https://stackoverflow.com/questions/25034187/how-to-get-the-entire-youtube-video-description-using-c-sharp-and-youtube-api-v3
Getting complete description of video using YouTube API v3
Most of the Google APIs the YouTube v3 API included returns data in JSon format, basically you get a string back. If you want it formatted nicely as html you need to do that yourself.
Youtube API V3
For each resource type, the guide lists one or more data
representations, and resources are represented as JSON objects.
The other answer is correct but doesn't exactly explain what is going on. Youtube descriptions are supposed to be plain text and the only way to post links are with the full URL. You can't hyperlink snippets of text or use any other html. I assume this is to prevent malware spreading and several other issues.
Youtube detects and linkifys URLs in the description when you open a video. You would have to process the plain-text description for links and add the html a href tags yourself. One way to do that is to use Regex to detect URLs.

How to catch a certain part of a website?

Suppose that we have a website. We want to show a specified part of this site in another site, like a table of data that shows latest news, and we want to show this part in our website with javascript.
Is this possible? Are there any more information needed?
We all know that with this code:
<iframe src="http://www.XYZ.com">
</iframe>
we can load all website, but how to load a specific part of a website?
I think your best bet is JQuery.load(), but I'm not up to speed on whether there are crossdomain problems with that approach. • Just checked and there are.
You can use PHP to load the output of a page with file_get_contents() or similar and then scrape out what you want for your own output.
Example:
$str = file_get_contents("http://ninemsn.com.au/");
// Reallly shouldn't use regex with HTML.
$region = '/(\<div id\=\"tabloid\_2\" class\=\"tabloids\">)(.*)(\<\/div\>)/';
preg_match($region, $str, $matches);
echo $matches[0];
Finally, something to keep in the back of your mind is that many of the larger websites that developers may want to get content from for their own website offer APIs to easily and efficiently obtain information from their site. YouTube, Twitter and a number of photo sharing sites are good examples of these. JSON and XML are probably the most common data formats that you will receive from these APIs.
Here are some examples of APIs that produce usable JSON:
YouTube video feed: https://gdata.youtube.com/feeds/api/users/Martyaced/uploads?alt=json
Twitter feed: http://api.twitter.com/1/statuses/user_timeline.json?screen_name=Martyaced

Facebook 'Like' buttons and # URL strings?

What does Facebook make of 'Like' buttons in a ajax web app if they are referring to the same page but with a different # string?
Does it treat them as different pages to 'like'?
for example if i get 4 like clicks:
mysite.com/articles#story1
mysite.com/articles#story2
mysite.com/articles#story3
mysite.com/articles#story4
what will come up in the users' newsfeed
4 people like mysite.com/articles
or
dave likes mysite.com/articles#story1
tom likes mysite.com/articles#story2
ben likes mysite.com/articles#story3
nick likes mysite.com/articles#story4
are there any other things to think about with FB and # strings?
Facebook's like buttons use metadata that are embedded in the HTML markup of a single page. It would work in theory if your URL's produce different metadata when accessed by curl (i.e. without JavaScript, which I believe is not possible since the hash portion is not seen server-side, so there is no way to act on hash string values server side).
So having said that, I would assume that Facebook Like buttons don't behave differently for different hash strings. A look at the facebook documentation (which mostly sucks) doesnt mention this, but the facebook developer forums seem to confirm this: http://forum.developers.facebook.com/viewtopic.php?pid=240151
However, all is not lost. You can specify the URL of a like button, so just set the URL to be the SEO-friendly URL of the same page: http://developers.facebook.com/docs/reference/plugins/like
UPDATE - Clarifying from the comments
So, now that we know you have static versions of the hash string URLS. Before, you were most likely placing like buttons on the page with this code:
XFBML:
<fb:like show_faces="false" width="450"></fb:like>
Instead, you should be specifying the SEO version of the URL. For example, when you're on mysite.com/articles#story4, the code should look like:
XFBML:
<fb:like href="mysite.com/articles/story/4" show_faces="false" width="450"></fb:like>
Facebook will drop everything following the hash tag.
What you need to do is send your request escaping # symbol encoding it in %23
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fmysite.com%2Farticles%2F%23story1" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px">
Facebook mostly* supports Google's ajax-crawling spec, so that if the fragment starts with an exclamation mark, then Facebook will do the following conversion for the request, so that the server can get the fragment and serve the expected content.
https://myapp.com/#!/post/2 => https://myapp.com/?_escaped_fragment_=/post/2
(According to Google's spec the user should never see the ugly url, so i assume that Facebook will always store these urls in the "exclamation mark" format.)
Serving the proper content for these requests is often non-trivial. See more here.
*The meta tag trigger does not work. I tested it on 2012/08/18.

Categories

Resources