Mini platform for automatic display of video files online in your website.
By Benoît Labourdette. Version 0.1 to July 22, 2018.
Technical preamble on online video
It is often mistakenly believed that video platforms such as YouTube, Vimeo or Dailymotion are essential to be able to put streamable videos online. It is nothing of the sort. You can put videos online on your own server (paid or free), just like you put texts and photos. The only thing is that you must first “encode” the videos in light and compatible format (to do this the free software handbrake is really one of the simplest and most effective tools).
As soon as the videos are “encoded”, in MP4 format which makes them readable by web browsers, it is enough to drop the files on its server (via FTP software) so that they can be directly readable in streaming.
Two essential details to make it work:
- Don’t forget to check the “web optimized” box in handbrake (this is what allows streaming).
- Take care that the file does not “weigh” more than 10 to 20 MB / minute (so that it “fits” well in most connections).
- Have a web hosting (payed, likeO2Switch or free like Free pages perso).
- Know how to use FTP software like Filezilla (this can be learned in 5 minutes).
- Know how to use plain text software, such as Notepad2-mod or Notepad++ under Windows.
- This platform only works on a web server, not on a local computer, because it is programmed in PHP (language interpreted by all hosts). Unless you install a server (like Apache) on your local computer, of course.
Why this mini-platform video project ?
- The goal is to have an almost automatic mini-site to display light MP4 files (with handbrake) in a nice and inviting way.
- I used to copy files to an FTP server and people could access them. It worked, while being very spartan: there was just the list of files, often divided into subfolders for more clarity, but “dry”, without any possible editorialization..:
- With this mini CMS (Content Management System), which I named BL_VIDEO_CMS, the use is almost as simple as uploading MP4 files to an FTP. But the CMS generates pretty pages almost automatically that can be edited.
- The goal is not to waste time to put the files online, for example after an educational intervention, and yet to be able to immediately offer a pretty interface, which is important for the enhancement and sustainability of productions.
Two possible functions:
- Tree structure : there is a “root” folder for the home page, which contains subfolders where the video files are stored. For example during the summer of 2018 I led filmmaking workshops in several holiday centres CCAS: I wanted a home page that would give access to films made in each centre.
- Single page : but if you only have one list of movies, so you only need one page, I made a version of the CMS for single page, which works on the same principle in a simpler way.
In this article I explain how the CMS works with tree structure. The single page is simpler, you can download it, it speaks for itself with the example it contains.
What we need to prepare for this to work
Instead of only having a subfolder /mp4/ in my computer where I prepare the MP4 files encoded with handbrake, I have three folders : /mp4/, /jpg/ and /txt/, in which I will put what I need so that then the CMS displays the movies automatically :
- Video files encoded in light MP4 (10 to 20MB per minute). In the folder: /mp4/.
- Create a light JPEG thumbnail (720 pixels wide for example) for each movie. They are stored in the /jpg/ folder.
- Create a TXT file corresponding to each movie. Stowed in the /txt/ folder. This file consists of three lines:
- The title to display
- The director’s name.
- The synopsis of the film.
Important: mp4, jpg and txt file names must be exactly the same, and must not have capital letters, accented characters or spaces.
You can number the folders and files if you want a display order.
We must also prepare:
- Write a small text the page of each subfolder and the home page.
- Choose a logo for each page and for the home page.
File and folder structure
The files found at the root are:
- logo_page.jpg : the logo of the home page, and the site.
- text_page.jpg : the text that will appear at the top of the home page.
And there are as many identical subfolders of this type as you want:
So, we see that there are two separate index.php files: the one at the root and the one in each subfolder. This CMS consists of these two index.php files, quite simply, and a structure of folders and files from which they will draw.
Details of operation
index.php (in a subfolder)
There must be three subfolders:
- /jpg/ : inside there are the thumbnails of the movies + a file logo_page.jpg, which is the logo of this page (used as home page to make the links).
- /mp4/: Inside are just the MP4 files of the movies.
- /txt/: inside there are the text files of the movies + a file :
- texte_page.txt : text that appears at the top of the page
- texte_accueil.txt : what appears on the home page as well as in the right menu. File in two lines: name of the holiday centre + dates.
index.php (at root)
It needs everyone, at least a subfolder with everything in it, and then his two files at the root :
- logo_page.jpg : the logo of the home page, and the site.
- text_page.jpg : the text that will be displayed at the top of the home page (on a single line for the moment).
Summary: what we need to do to upload the videos
- Encode videos (in light MP4, with handbrake with “Web optimize” checked. Max flow rate: 10 to 20Mb / minute).
- Create a thumbnail by video (JPEG, 720 pixels wide maxi, super light files).
- Create one TXT file per video (with title + director + synopsis, on three lines).
- Choose a logo by subfolder (also super light JPEG).
- Create a text by subfolder (TXT file with the text at the top).
- Choose a general logo.
- Create a general text (on a single line).
That’s it, we’re getting all this ready, it’s still very fast. Then we create the folders that go well, and finally we put the two index.php files. And the site works right away!
You will find here the CMS to download. It contains an example with a film and a subfolder. All you have to do is copy it into a folder at your hosting provider so that it works right away. It’s up to you to customize it!
You will find the two versions: a tree version and a version for a single page of videos:
Video platform with tree :
- Direct link : https://www.benoitlabourdette.com/_docs/projets/2018/2018_ccas_vous_faites_quoi_dans_la_vie/
Video platform with single page :