Ever more video on the web

Video occupies a growing part of online communication and many would like to be able to enrich their web pages with different video content in different forms – on demand, live, in a television type programming and in other forms.

This desire cannot be immediately satisfied. Besides having the appropriate content, one must “insert” it on the target web pages, there must be a “pump” streaming the content at the desired time or on demand. Finally, a requirement that is valid for most messages, one must be able to change any time the set-up that is decided today.

The good news is that technology allows you to do all this, but the bad news is that, unlike “text” web pages editing that many command, “video” web page editing involves additional complexity.

The GetWim framework is perhaps the most advanced solution that allows those who know how to edit HTML web pages to create video-rich web pages, using an extended set of HTML tags. Let’s see this example

<vod-list

items-per-page=”3″ 

destination-url=”video.html” 

tags=”hero,flight,wingsuit”></vod-list>

Thinstructions say: create a paginated list of 3 videos on demand taken from those who have the “hero”, “flight”, wingsuit tags and view the video selected on the video.html landing page. The visual result will be

Practically a web designer will upload to WimTV the videos whose appearance on the web page is required, will write the few instructions presented above and, voilà, the videos will magically appear on the web page. If the videos are changed and not the layout, it will no longer be necessary to enter the HTML code, but simply act on the WimTV dashboard by unpublishing the videos and publishing others in their stead.

This other example concerns pay per view content

<video-container event-type=”vod” auto-play=”true” video-id=”{{videoId}}“>

<video-player></video-player>

</video-container>

Here the web designer says: show the video player in autoplay mode, and request payment if the video is pay per view.

The same applies live events and not videos on demand are published on the web page. Live events will be created on WimTV using the WimLive service and the web designer will write

<live-channel-list

items-per-page=”2″

show-pagination=”true”>

</live-channel-list>

to say: shows a list of live channels on the page, displaying 2 per page and showing pagination. The visual result will then be

At the scheduled time, whoever clicks on the live icon will see the event.

Even if the event changes in the same channel the event will appear on the web page of the site without changing the HTML code.

Let’s take another example. Even the television experience is many decades old, it is still valid because one knows that by turning on the television, “there is always something”. This model can be applied to the web with the WimCast service that makes it possible to create television style schedules on all 24 hours.

So, if you have created a programming and want to make it appear on a web page, just write

<video-container video-id=”{{videoId}}” event-type=”cast”>

<video-player></video-player>

</video-container>

to obtain the following result

At this link: http://get.wim.tv you can download GetWim and consult the detailed documentation. Just upload the files to the root root of your web site or within a specific folder to use the components of the framework, starting from a starter template or using pre-existing HTML page and importing the .js and the .css of the framework.

From a technical point of view, GetWim is an AngularJS-based modular toolkit to draw the graphic interface with a declarative approach. It is made up of a set of components with reusable and possibly customisable tags and custom properties.

GetWim allows you to use only the features of the WimTV platform that you really need, keeping the page code clean and optimised with the specific tags of the necessary features. The tags, managed by the component controllers, trigger WimTV’s API logic to link a frontend action to a WimTV backend reaction.

To better visualise the contents, additional open source libraries have been implemented within the framework: the layout is completely responsive, based on the Bootstrap Grid system, while the video player used is Flowplayer, a powerful multimedia player that can be graphically customized using CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.