A new project has been born - Stream Playlist #1

Recently I wanted to watch a series hosted on different platforms like streamcloud or vivo. So I searched for this series and opened the first video on streamcloud and was abused by tons of porn advertisements. Ok I could install a Adblocker, which I don't like because it steals smaller websites like mine the money, but there are sites out there where you can't start the video with enabled adblocker. After I passed the 10 seconds delay I clicked the button to proceed to the video. Again I was bombed with advertisement. Even though this is already absolutely annoying, I was super pissed off after four times a popup opened when I clicked the start button. Incredibly the video finally started after the 5th click. To watch one episode which has around 20 minutes play time I had to see 8 advertisement blocks and 4 popups. Holy shit was I annoyed when I thought about that one series like fairy tail has over 250 episodes and I have to do this every 20 - 40 minutes!!!

The idea was born

So i skipped watching the series and start planning and thinking about how to solve this. The idea of a website to create, share and watch video streams as playlist was born. After I couldn't find anything within a short time on google, I asked some of my friends how they are watching those videos and sadly they are doing it the same way I did.

A bit of research resulted in a first try, where I grabbed the video urls from the stream websites. A simple JavaScript bookmark copied the url of the mp4 files into my clipboard and I pasted them into VLC. Cool I created with simple tools a working playlist for my videos but found pretty fast some limitations like the expiration of the video urls after one hour. The huge effort to create the playlist was also not nice. I still had to open every video page, wait 10 seconds, proceed to next page, copy the mp4 url with my bookmark and paste it into VLC.

Even if this was a bad working approach I got a better idea of what I want and how the project could look like.

First prototype

Now it was time to create a real prototype. I knew that I would need a backend with persistance to have a unique url for each playlist so that I'm able to create them on my PC and open them on my TV or Laptop. In a future version a Chrome / Firefox plugin could be usefull to create the playlist easier. As well I knew that I don't want the user to take the effort to grab the real video links from the stream websites. This requires me to build scraper for the different provider.

I decided to take my favorite tech stack which looks like this:

• Backend - REST API
  • PHP 7.x
  • Phalcon Framework
  • Composer
  • Mysql
  • Chrome Headless (if needed to scrape dynamic pages)
• Frontend
  • Aurelia
  • ECMAScript
  • Babel
  • SCSS
  • Materialize CSS
  • VideoJS

The frontend consists of a simple form to create a playlist with a name and a button which lets you add a url of the video page. After a url was inserted the backend is requested to scrape the video page for it's video title and a image which we can show representative for this video in the playlist. When all videos have the required informations the user can save and open the playlist. Before the video can be watched, the backend is requested to scrape the video page again to get the url of the mp4 file the user want to watch.

Right now it took me 2 - 3 days to create a working initial version which still requires many improvements. Right now you can create a playlist, give it a name and add videos for the hosters streamcloud, vivo, onepieceloads, narutoloads, fairloads, hunterloads and dragonball-loads

One bigger problem I faced, was the limitation of some sites that the IP, the video will be streamed to, must be the same the website was opened on. I solved this by proxying the video stream through my server as well, which will cause big problems when the providers block my server IP^^

You can check out my project at http://stream-playlist.stagetwo.eu

Or have a look at the demo video (sry for the bad quality)

Feel free to give feedback and suggest features