I am trying to create a service for a project that allows javascript-based embed codes for sharing audio clips, such that the player appears on sites where it is embedded. Very much like a soundcloud clone, but on a far smaller scale and for private sharing only.
I am not sure how to go about this, but thinking of making the javascript write the HTML5 player dynamically into any page where the embed is placed, fetching the details needed to render the player into the page via JSON-P (to overcome the same origin policy) and streaming the audio clip directly from the main server. I will prefer to use the jQuery framework.
Is this the best method to go about this? I am trying to research, but I do not know how exactly to search for the information or where to start.
P.S. I also found this helpful S/O article about how soundcloud hides the URLs of the streaming media to prevent direct downloads
How has soundcloud hidden the URL of streaming audio
making the javascript write the HTML5 player dynamically into any page where the embed is placed
You can also use iframe that will load the “widget” from your server. That's how HTML5 widget is built at SoundCloud.
fetching the details needed to render the player into the page via JSON-P
You can use CORS in order to overcome same-domain policy if you'd want to render widget with JS.
As for the streaming, the basics of it can be done via some simple server configuration and serving media files from that server (nginx is probably your best bet).
I hope this helps some.
Related
I have a React application. I am trying to live stream on YouTube. What i am trying to achieve is, when i am live on YouTube, i want a certain part of the website to show the live streamed video as embedded. When i am not live, i want this section of the website hidden.
I have tried using the google v3 API but the cost of API calls to search for live videos on the channel is too expensive (i was doing a query to the API and if a video returned i would show the iframe on the site, and if not just hide it). However, with this quota and the usage of the site, this is not a suitable solution.
I also cannot render the content in an iFrame and then just 'getElementById' because then i'd get CORS restrictions. I thought about building some sort of proxy that could just get the HTML from the youtube page and return it to me as a string (by passing the CORS issues), then just checking for an ID to determine if the channel was live or not.
I've tried alot of searching but either im looking for the wrong things or there is limited support for what i'm trying to do. Any other suggestions on how i can achieve this please?
thank you in advance
I have a URL and I need the content inside this URL. Actually, I wish to embed the content present inside this URL. What all are the possible ways to do this without any cors issues??
I have already tried using iframes and other tricks to avoid cors issues. But still, I am not able to embed many websites in an iframe. My main aim is not to embed a website in an iframe but to embed the content inside the website URL.
I will be more than happy if there is an API which returns me back the content in a URL website.
If there is not, then how can I create such an API?? And how do I get it hosted??
As a solution to this, I created a flask app which will return me the whole website so that I can embed it in my iframe. But then it is like a proxy server and I cannot host it on Heroku because Heroku does not allow public proxy server.
Please note embedded the whole site or just the content is of similar use to me. It is just that when embedding the site, it will be interactive and in the other case, it will not. I am good with both, embedding just the content or the whole website.
Now, I am thinking to make a web crawler which will crawl the web, cache websites and store them in a database. I am thinking to host this on firebase. I have no idea about the capabilities of the firebase. I just know that it provides us with a NoSQL database and some cloud functions.
The cloud functions part interests me.
I don't know if the following is correct/feasible.
I will send the URL(whose content I need) to firebase. It will then fetch the whole website and store it in the database(so, that next time I request the same URL, it does not need to recache the whole site again) and then return me this cached content.
If there is other better way to do this, please let me know.
I need the content for my chrome extension https://github.com/Shaikh-Ubaid/InSyd
For code, please refer to this GitHub repo.
To get an idea of why I want to get content/embed content, I am attaching a gif showing the working of the extension.
<img src="https://raw.githubusercontent.com/Shaikh-Ubaid/InSyd/master/Popup-demo.gif" alt="gif" />
I have an web page where users can view videos.
But the problem is when I inspect the page, it shows the video url.
So is there any idea how we can hide video source like youtube and other videos portal ?
There is no way to hide the video URL entirely without resorting to browser plugins. You can obscure it though, but in most cases they won't be worth it.
Using Media Source Extensions you can deliver segments of video data using obscured urls. And the URL won't be immediately visible in the source of the page. This is similar to what Youtube or Netflix does but requires massive engineering work on the backend. This is also the technique used to play MEPG-DASH with e.g. dash.js or shaka-player.
Set it using Javascript, so it's not viewable with view source, it won't help with inspecting though.
If your issue is people copying the stream URL and using it in their own players, then you might look at protecting it with some sort of tokens security. This is supported by almost any CDN out there, and there are plenty of open source systems to do it in most programming languages.
Lastly, if the issue is that you don't want anyone to copy the content, you can apply DRM protection. One of the easiest and straightforward ways to get started with that, might be using Azure Media Services.
Is there any javascript library out there that can find the url to the flash video file (.flv) on current page where it has an embedded flash video player? Ex. opens collegehumor.com video link, shows flash video url.
I have been looking through codes from chrome extensions which discovers flash video links for download but no dice.
Browser extensions can look into Flash internals and monitor your HTTP activity to see where data is being pulled from, however Javascript running in the document does not have permission to read either of those.
Some Flash apps expose some of their internals to Javascript, but they need to specifically write in that functionality, and for third parties this would be documented, presumably as an API. As far as I can tell, collegehumor doesn't provide any of that.
So I have some videos in .flv format which I'd like people to be able to view from my site, without being able to download them. So far Flowplayer seems like the best choice for the actual flash player.
However, I've been looking into this video streaming thing, as its supposed to make the videos very fast to view and allows seeking to the middle of the video, etc. What do I need to make it work, do i need to have some special server software for this? And how can I integrate with this software using the javascript/PHP code that i'll use to display the videos?
Thanks.
Good news! You don't need special software, most reasonable web servers can do all of that out of the box. What you're describing, and what Youtube and the rest do, isn't streaming actually. It's called progressive download.
Basically the SWF player (flowplayer in your case) is downloading the FLV video, and playing what it has downloaded so far. To skip to some video that it has already downloaded, it seeks in the downloaded file. To skip beyond what has already been downloaded it discards the downloaded file and starts a new download, but it asks the HTTP server to start giving it the file at a certain offset. Thankfully, most HTTP servers can do this out of the box.
So you just need to put the FLV files somewhere that's publicly available to download via HTTP (just test this with your browser). Assuming you put flowplayer at /flowplayer.swf on your site, and the video is /2girls1cup.flv you would insert this into your page:
<script src="http://static.flowplayer.org/js/flowplayer-3.0.6.min.js"></script>
<!-- Edit this with the width and height to display the video -->
<a
href="/2girls1cup.flv"
style="display:block;width:425px;height:300px;"
id="player">
</a>
<!-- this script block will install Flowplayer inside previous anchor tag -->
<script language="JavaScript">
flowplayer("player", "/flowplayer.swf");
</script>
I took this example from the flowplayer demos page where there's lots more examples of lots of ways to customize flowplayer, the way it behaves and is displayed.
There are two ways in which an actual streaming server is better. One is for doing multicasts of a stream, in which all clients are at the same place in the video, which is easier on the server. The other is being able to deliver a number of different encodings of the same stream, so that, for example, clients can the video at a bitrate that best matches their playback capability.
A lot of companies bet a lot of money that this would be very important for video to take off on the web. It looks like all of them are wrong. Streaming servers are mostly used in the enterprisey world, which might explain their enterprisey prices.