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.
Related
I need to build a web based video player. Something like coursera/udemy. I would like to know the following.
Where we can store videos (Blob,Db..etc)?
Say I uploaded video in Blob storage. How can I make sure nobody is able to download this videos?
What should be an ideal video streaming architecture(BE+FE) if I am expecting 500 concurrent users?
Do I really need to build a video streaming Back End or I can simply use services like vimeo to get this done?
I inspected how Udemy is doing, i could find the following. It looks like they are using some blob to store videos. But when I tried to access this directly it says I cannot. How this works?
There can be no way to protect your video from a determined sophisticated hacker. In the very worst case, they can record the video from their screen using a iPhone.
You can learn more about blob: URL e.g. here. The bottom line: it's a browser-side object, it's not to store videos.
You definitely can use streaming services, but this will even further reduce your control. OTOH, it's not worth your effort to develop some new streaming architecture if you only expect 500 concurrent streams.
I need to record a webpage and save it as a video, in an automated manner, without human interaction.
I am creating a NodeJS app that generates MP4 videos on the request of the user. The user provides an MP3 file, the app generates animated waveforms for the sound file on top of an illustration.
What I came up with so far is a system that opens a generated web page in the backend, plays the audio file, and shows audio visualization for the audio file on an HTML canvas element. On top of another canvas with mainly static components, such as images, that do not animate. The system records this, the output will be a video file. Finally, I will merge the video file with the sound file to create the final file for the user.
I came up with 2 possible solutions but both of them have problems which I am not able to solve at the moment.
Solution #1
Use a headless browser API such as Phantomjs or Puppeteer to snatch a screenshot x time every second and pipe it to FFmpeg.
The problem
The problem with this is that the process is not realtime. It would work fine if it's JUST an animation but mine is dependant on the audio file. The audio file will play-on during the render which results in a glitchy 1FPS-esque video.
Possible solution?
Don't play the audio file live but convert the audio file into raw data. Animate the audio visualization based on the raw data instead.
Not sure how to do this and if it's even possible.
Solution #2
Play, record, and save the animation, all in the frontend.
Could use ccapture.js to record and save a canvas.
Use a headless browser to open the page and save it to disk when it's done playing.
Doesn't sound like it's the best solution.
The problem(s)
I have more than 1 canvas.
It takes a while, especially when the audio file is longer than 10 minutes.
Making users wait for a long time can be a deal-breaker.
Possible solution?
Merge canvases into one.
No idea how to speed up the rendering time and I doubt it's possible this way.
Late answer from someone looking for similar options due to the convenience of some browser SVG APIs:
My first recommendation, as someone who has written a fair amount of my own audio visualization software, is to use a graphics library and language that don't require a browser or GPU, like Gd or Anti-grain Geometry or Cairo with any server-side language. You might also check out Processing.org (which I haven't used), not sure if there's a headless version.
If that's not possible, I've found these so far but haven't tried them:
https://github.com/tungs/timecut
https://github.com/myplanet/headless-render
https://wave.video/blog/how-we-render-animated-content-from-html5-canvas/
I am creating an app to trim video where a user either can upload the video file or can paste YouTube URL.
I am able to make the trimmer work for upload video using FFmpeg, but for YouTube URL, firstly I need to download the video to the local machine and then trim it using FFmpeg.
I am using youtube-dl NodeJS library to save the video file to locally, but the issue is as I am allowing the user to download only 15Sec video no more than that, and I have applied validation of 60m long video, yet when I get 1080p video there are two issues.
1. There is no audio in the 1080p video.
and
2. The video is taking too long to download locally and the process is taking almost 7-8mins to complete.
For the first one, I can get the audio and video separately and then merge both of them in the video, but the second one is where I am stacked.
I have added a time log I can see the trimming is taking only about 3-4 seconds, but the downloading is taking too long.
Is there any way to make it work faster? Or, Is there any way I can download only that part of the video, not the full video, in any technology.
I am open to using any technology until it is working faster than my current implementation.
If this is something related to server configuration, please suggest which one would work better.
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 it possible to live stream video (& audio) without using the RTSP protocol? Today I tried out Adobe's Flash Media Server and the free alternative Red5. Both seemed like a bit of an overkill (plus had issues with Red5 not supporting AAC audio).
Basically I'm looking for a way to upload live video to my server so it can be viewed using jwplayer, and then stored so it can be viewed later. Does MP4 support live streaming? So that I can record it client-side then upload it for viewing?
I've been experimenting with uploading jpg images and using a HTML5 canvas to display them so it appears like a video.
Here's my code: (using only a few images)
http://jsfiddle.net/QM5EV/
There's several things wrong with it. For one, it's not efficient because it requires mass amounts of jpg's to be uploaded. And most importantly there's no audio.
What would be best to do? Is RTSP the only sensible choice? Thanks. :)
Live via HTTP servers is, for the most part, not an option. But there is "Apple Live Streaming" aka MPEG-TS, although that limits your clients to iOS devices. It uses a plain ol'web server. (This seems to be changing, increasingly desktop browsers are supporting MPEG-TS, but will probably take some time before it is common place.)
For online streaming, rtsp is the best solution. Other protocols such as RTMP ( http://en.wikipedia.org/wiki/Real_Time_Messaging_Protocol) but transmit to any multimedia content using RTSP.
Another thing is that you can make a specific streaming server accepts HTTP redirect requests. Thus, instead of URL's as rtsp://mydomain.com:554/myfile.mp4 can have URL's like http://mydomain.com/myfile.mp4
Regards!