A page 100% video

Jerome Granados / Katia Jannin on Tuesday, September 2nd 2008 I 0 Comment

After the player; update and the new uploader online, the next one to benefit a lot of new improvements is the video Page.


The video Page ( available from Blog Pro ) is the navigation page that lists all your website videos. So far, this page thumbnails leaded to the articles which had a video in. To read the video, it was necessary to open the corresponding article.

Now, the video page is totally transformed. It still permits to list the videos, but the big change is that now, it's possible to read the video directly in the page.

The new video page principle is simple. Divided in 2 parts, it works like this :
    
  •     In the upper zone, the visitor plays the videos
  •     In the lower zone, he navigates through your website video content.
Let's see that in details.

A Big, very big player

A page 100% video
The improvement that strikes the more on the video page is the player size. What's better than a 600 pixels width player to highlight your videos?

A page 100% video
This player, specially overhauled for the page, is 16/9. Consequently, your 16/9 videos are played full width, while the 4/3 displays black vertical stripes on both content sides.

I remind you the WM enginer automatically detects the video format and adapts the display format in the player.

Depending on your website width, video information is diplayed either under the player ( as the upper exemple ), or to the player right.

You can choose what to display: author, score, statistics.
For that reach the DESIGN menu > page design > video.

Note that navigation options are preserved.  You can display the path to the page ( breadcrumps ) and the site home button.

Concerning the export prohibition, I send you back to a former note.

Navigation side

Arriving on the page, the most recent video is the one ready to be played.

Below the player, are 2-lines displayed, the next video thumbnails. When the visitor clic on a thumbnail, the video is played just above, in the player.

"Previous" and "Next" links reload the lower page with new thumbnails.

"See all videos" link leads to another page. This page is the former video page equivalent. It lists all the website videos. It also propose various navigation possibilities.

  •     popular sorting
  •     chronologic sorting
  •     mosaic display
  •     list display
Important precision:  since the videos are displayed in the player, only your backoffice videos will be listed on the page.

A page 100% video

When the visitor clic on a thumbnail, it automatically returns to the previous page and play the chosen video.

There's an exception with private videos. You can identify them by the lock displayed in the bottom right corner. When a visitor clic on a private video thumbnail, he is rerouted to the authentification page.


Details concerning the thumbnail generation.

A page 100% video

It is annoying for a page that lists videos to always display the same thumbnail. I often happens when your videos start with the same jingle, and the thumbnail is the video first image.

To make your video page as attractive as can be, Samir has developed a very astute algorithm. Depending on the video lenght, it permits to choose a precise moment to extract an image that will be used as the video thumbnail.

Crop the thumbnails

A page 100% video
If the thumbnails generated by the application don't suit, you can change them manually. This is not new.

What's new is that you can crop the thumbnails.

From the article, in the video tab, clic on the image preview. Automatically, depending on your video format, we'll propose you a 16/9 or a 4/3 crop.

Web TV?

Little by little your favorite CMS is building functional parts that will lead to permit you creating your own web tv.

The adventure continues...Samir and Christian are already working on the september/october video improvements.

WMaker will hugely improve the video part at this moment. Stay linked to the blog ;)






New comment:
Facebook Twitter



Last tweets
WMaker Blog | Le système de paiement Payzen est ajouté au webservice de la... | #cms https://t.co/6VvXLLceHm https://t.co/HF3XvCMvKw
Friday, October 14th - 19:00
WMaker Blog | Facebook Articles instantanés: Facebook a ouvert ses articles... | #cms https://t.co/WUawtB2eWc https://t.co/tnDyVMWJHo
Monday, August 1st - 17:01
WMaker Blog | Trois numéros plutôt rare: L'autre jour Sébastien a trouvé dans les... | #cms https://t.co/MMGmi2wozH https://t.co/IvP8v4m3Wz
Thursday, July 28th - 10:22
WMaker Blog | Créez vos apps avec GoodBarber: Aujourd’hui, coup de projecteur sur... | #cms https://t.co/Xnygo9EEQX https://t.co/DseCCN8wpq
Monday, July 25th - 12:03

Photostream