Video On The Web

Simple integration


Video On The Web - Information Technology


The moving image online is now an essential component of both professional and hobby sites. The tools that were once the province of big corporations like the BBC, CNN, SKY etc. etc are now desktop applications, enabling anyone to get their hands on them and edit feature- length films.

Video online, though, has only become possible because a number of factors have converged over the last few years. The almost ubiquitous installation of broadband internet access has meant that the delivery platform for almost full-motion high definition video is now a reality. The introduction of dual core processors into PCs together with advances in both graphic cards and rendering software have also played their part.

For the web designer, placing any kind of video on a web page isn't yet child's play. A number of factors have to be considered to ensure visitors to the site have a positive experience. Here at ToromeTech, we have the know how to help you showcase your videos. Below is a simple Video Player to illustrate some of our skills - Enjoy the clips.

In the design below, content (video clips) are stored in a remote location . The Flash interface retrieves appropriate content when the user clicks on a particular title from the thumbnail menu below the video display section. When new content is added to the remote location, the interface will automatically updates it menu to reflect the change.

Start videoplayer by either clicking any of the thumbnails at the bottom or click the play button at the top



Get Adobe Flash player


The Technology


To view video on the net it has to be captured,encoded and finally delivered. This process is depicted in the figure below. Why do you need to encode? At the most basic, it's because raw video is huge. If you don't encode your video, it will be too big to transmit over the Internet to your viewers. The process of encoding involves making the video as small as possible while maintaining the highest quality possible. It's a delicate balance. You can get an amazing looking video at 4 Mbps (that's the video bit rate - how many bits get transmitted every second) at 1920 * 1080 pixels, but you would need an Internet connection that is over 4 Mbps to stream it, or else download a file over 1.5 GB to view it. Conversely, you can easily create a video file that is only 100 kbps, but it may look so poor that no one wants to watch it.




vid


Capturing devices can be as basic as a smartphone to sophisticated HD camcorders. Obviously the gadgets you employ will have a bearing on the end product. Have a look at YouTube and you will get the full picture.

Flash


When it comes to video delivery Adobe Flash Player has cornered the market - with good reason. It provides consistent information among different video delivery mechanisms independent of the actual video player used - such as Open Source Media Player (OSMF), Brightcove, JW Player, and others - that provide their own APIs(Application Programming Interface).


HTML5-Video


HTML5 is now making so much wave that excerpt you are from another planet recently not to have noticed. Some of the most heavily publicized additions include the support for SVG graphics, the new canvas tag for displaying interactive graphical content, and the video tag for displaying video content. The later gives you the ability to embed video content directly into your web pages without the need for a third-party plug-in such as Flash Player. This new ability for browsers to provide native video has made it a lot easier for web developers to add video content to their websites. However there are still some issues with codec - these are software that encode or decode video for a specific file format. Although the HTML5 specification initially mandated support for the Theora Ogg video codec, this requirement was dropped from the specification after it was challenged by Apple and Nokia.

Sadly this means that different browsers support different codecs, which sounds like a bit of a pain and it is. Recently, the situation has improved so that you only need to provide your video content in two different formats: MP4/H.264 for Safari and Internet Explorer 9, and WebM for Firefox, Chrome, and Opera. Firefox also supports Theora Ogg, but it has supported WebM since version 4. The other problem HTML5 Videos is DRM - Digital Rights Management. If you're concerned about people being able to download and freely share your videos, then HTML5 video may not be right for you. As it stands the current specification when implemented on a web page enable users to access the direct URL to your video files, which they can then freely download. There is currently no way to prevent this with HTML5.At some point in the future a standard method may emerge to handle digital rights management (DRM) in HTML5 itself, but currently there is no such method.

Flash does provide DRM and is also being used to provide a fallback method to serve video content to legacy browser users. As powerful as it is, HTML5 video is not currently advisable for those wishing to protect their video content. It still though in its infancy and much more need to be done with standardization.


Post encoding, you have two choices of delivery - Progressive or Streaming(sometimes called live)


Progressive Delivery:


The advantage of the scheme is its simplicity (there is no need for a special streaming server) and the automatic use of HTTP caching infrastructure. The disadvantage of the scheme is that you have no control of the video download, limited seeking ability (the user cannot seek to video that has not been downloaded), waste of bandwidth (the entire video is downloaded as fast as network connection can handle, even if it is not viewed), among other drawbacks. As such, progressive download is only applicable to the simplest video applications. Since video is transferred over HTTP, a content-protection mechanism may be required. YouTube uses progressive video download along with special server-side components to overcome the above-mentioned limitations

Streaming Delivery:


Live video means that you're capturing, encoding, and delivering video in real time. The user can start to watch the video immediately a connection is made. Think of a sports game that is being streamed on the Internet while it's happening or video conferencing. It is a more advanced video playback mechanism. With regards to Flash, the Flash client obtains video data from a special streaming server, such as Adobe Flash Media Server. Streaming is implemented using Real-Time Messaging Protocol (RTMP), which is an open protocol developed by Adobe.
The advantage of RTMP streaming is comprehensive control over buffering and download for optimal performance. Fast start, seeking, trick modes, and multi-bitrate streaming are readily supported. There is no wasted bandwidth; only the necessary video data is downloaded. Video data is not written to disk (browser cache, or any other location) but processed by Flash as soon as it is received.
There are several flavors of RTMP: it can be tunneled over HTTP (RTMPT) or SSL (RTMPS). Flash Media Server also offers an encrypted format (RTMPE), used by many video sites.

It is at the encoding process where the joggling act (read delicate balance) is performed. Various parameters here can be experimented with to obtain the best quality video for your intended audience.





Our Most Recent Projects

Please do note that the clients listed below all came to us as a result of personal recommendations. They very much new nothing about the web let alone the fundamental technologies involved. One thing the knew for certain was that it is where everything is happening. They needed someone to take their ideas and make it happened so to speak on the web - And that's what we do here at ToromeTech.

Click on the vertical tabs on each client 's section to see how the sites were designed

Website Design - Project1

    Salient Features: Click on tabs to see content:

Ezeogu Publication

Preserving Igbo Heritage

Their Objectives:

We are here to take you on a journey to discover and appreciate not only the Igbo language but also the culture to which it gives expression

  • To contribute our bit to the crusade for the preservation of Igbo language and culture
  • To bring the Igbo language to all Igbo children growing up in the Diaspora who are eager to connect with their heritage language
  • To provide a tool and to be of assistance to anyone (Igbo and non-Igbo alike) who has a genuine desire and interest in learning to read, write and speak the Igbo language
  • To create awareness on the current state of the Igbo language and the need to preserve it for the future generations

The Brief

A Complete Responsive Design

General theme should exude subtle colours and large expanse of margins and paddings that depict an uncluttered interface

  • Published Books will be sold on site
  • An interactive flash design game will be played on the site on a subscription basis
  • A dynamic content page showing Igbo phrases and their English equivalent
  • A dynamic picture gallery page

The Design Process

From Wire-frames To HTML5

In the design process, the business imperative as narrated by the client is of the essence. This is why they've come to us. Our design methodology is encapsulated in these four phases: Discovery - Design - Deployment - Delivery. Each of these consulting phases, defines a clear step in the process of taking the solution of a business problem from concept into production. The client is alway in tune with what is going on. This facilitate a smooth transfer of control after completion.

  • A wire-frame mock-up of the interface is the starting point
  • Basic graphic assets are added into mocked design to improve visual for client to get a handle
  • intended graphic assets from client are then modified and edited in Photoshop to attain proper dimensions and resolution as per design
  • Responsive design is implemented with a skeleton backbone of components from Bootstrap framework
  • Various CSS3 style sheets are created to render the HTML pages with the desire effects
  • Java-script files are created to drive the front-end interactions
  • PHP script files are created to power the back-end applications

Progressive Development

Client's Input At All stages

To effectively bring the client in to the design and development processes, a common venue had to be established. The most convenient and suitable location was the internet. thus, a private area was setup where client can log in and see how development was progressing. More importantly here,they could query issues they were not happy with and the development team can respond for them to see the immediate effect of their suggestions -

    Advantages
  • Very convenient for both parties
  • Significantly reduce glitches and typos
  • improved client satisfaction

Delivery

Deployment

This final stage of the design cycle was rather straight forward because it is invariably dependent on the preceding phases. Thus it was merely transferring the entire package from it testing platform on to a production one. Here, the databases for managing both the on-line book selling functionality and administering access to the on line Interactive Audio Application were implemented and tested. Paypal was the obvious choice for completing the e-commerce section due to it simple and intuitive modules.

Final Features

  • Site with interface as envisaged by client and then some
  • Java-script providing intuitive interactive elements at the front-end
  • Publish Book can be bought on site
  • Interactive - Audio Media can be played on site with access control
  • Client has total control of back-end activities













Website Design - Project2

    Salient Features: Click on tabs to see content:

Fabu Publishers

Publishing Books With Moral Values

Their Objectives:

Fabu Publishers is a Foundational Publishing house based in London. We have developed into a leading publisher of historical, cultural, educational and religious publications to name but a few. Our books focus particularly on fostering a better world order and promoting self-transformation. Our themes are Self-awakening irrespective of your denomination. Foundational thoughts are not merely academic but real food for thought for the discerning.

The Brief

A Complete Responsive Design & Branding

General theme should exude a bright colour specified by client

  • A dynamic book display gallery on home page
  • E- commerce integration
  • Published Books will be sold on site
  • A means of subscribing to weekly news letter from home page
  • A dynamic detailed content page showing main attributes for each book
  • A blog and news section

The Design Process

From Wireframes To HTML5

Our design methodology is encapsulated in these four phases: Discovery - Design - Deployment - Delivery. Each of these consulting phases, defines a clear step in the process of taking the solution of a business problem from concept into production. The client is alway in tune with what is going on. This facilitate a smooth transfer of control after completion.

  • Mapping - A wire-frame mockup of the interface is the starting point
  • Mapping is very subjective due to the fact that your personal feelings (emotions) and experiences are the driving force. It starts from your brain where you envisage how everything will be positioned in a given time - space disposition.
  • The transfer of these brain concept on to paper (mockup) is the starting block for the interface to come into realization
  • Basic graphic assets are added into mocked design to improve visual for client to get a better visualization

Progressive Development

Client's Input At All stages

To effectively bring the client in to the design and development processes, a common venue had to be established. The most convenient and suitable location was the internet. thus, a private area was setup where client can log in and see how development was progressing. More importantly here,they could query issues they were not happy with and the development team can respond for them to see the immediate effect of their suggestions -

    Advantages
  • Very convenient for both parties
  • Significantly reduce glitches and typos
  • improved client satisfaction

Delivery

Deployment

This final stage of the design cycle was rather straight forward because it is invariably dependent on the preceding phases. Thus it was merely transferring the entire package from it testing platform on to a production one. Here, the databases for managing the on-line book selling functionality , contact form , newsletter, blog and news functionalities were implemented and tested. Paypal was the obvious choice for completing the e-commerce section due to it simple and intuitive modules.

Final Features

  • Site with interface as envisaged by client and then some
  • Java-script providing intuitive interactive elements at the front-end
  • Publish Book can be bought on site
  • A blog section
  • A news section
  • A news-letter section
  • Company stationery consistent with wed interface
  • Client has total control of back-end activities









Website Design - Project3

    Salient Features: Click on tabs to see content:

The Nigerian Community

Joining The Motion

Their Objectives:

The Nigerian Community Waltham Forest (NICOWF) is a charitable organisation born out of the necessity to foster and strengthen the bonds among Nigerians living in the borough

  • Strengthening Capacity For Self-Help
  • Providing Economic Opportunity
  • Delivering Relief In Emergencies
  • Influencing Policy Decisions At All Levels
  • Addressing Discrimination In All Its Forms

The Brief

A Complete Responsive Design

The general theme should reflect the national colours (GREEN-WHITE-GREEN ) with large expanses of margin and padding that depicts an uncluttered interface

  • Lots of videos will be shown on site
  • Lots of pictures will be shown on site
  • Details of Nigerian embassies in the diaspora
  • Useful public information from the The High Commissioner s Office in London
  • A dynamic blog and news section
  • An opened architecture for accommodating new features

The Design Process

From Wire-frames To CSS3

There are multitude of different screen sizes across phones, tablets, desktops and TVs,. Screen sizes will always be changing, so it’s important that your site can adapt to any screen size, today or in the future. Responsive web design, responds to the needs of the users and the devices they’re using. The layout changes based on the size and capabilities of the device. For example, on a smart-phone, users would see content shown in a single column view where as a tablet might show the same content in two columns.

The fundamentals of the responsive design concept is based on a grid structure made of columns. A maximum of 12 will be utilized to display content for a typical desktop and anything bigger (TV). Tablets , smart-phones and smaller screen devices will use progressively less. The magic in rendering the same content for devises of varying screen resolution and sizes is in the css file (CSS - Cascading Style Sheet)

  • Mapping - A wire-frame mockup of the interface is the starting point
  • Mapping is very subjective due to the fact that your personal feelings (emotions) and experiences are the driving force. It starts from your brain where you envisage how everything will be positioned in a given time - space disposition.
  • The transfer of these brain concept on to paper (mockup) is the starting block for the interface to come into realization
  • Basic graphic assets are added into mocked design to improve visual for client to get a better visualization

Progressive Development

Client's Input At All stages

To effectively bring the client in to the design and development processes, a common venue had to be established. The most convenient and suitable location was the internet. thus, a private area was setup where client can log in and see how development was progressing. More importantly here,they could query issues they were not happy with and the development team can respond for them to see the immediate effect of their suggestions -

    Advantages
  • Very convenient for both parties
  • Significantly reduce glitches and typos
  • improved client satisfaction

Delivery

Deployment

Final Features

  • Site with interface as envisaged by client (based on the Nigerian Flag)
  • Java-script providing intuitive interactive elements at the front-end
  • Dynamic Photo Album
  • Dynamic Video Player
  • A Blogging Section
  • A News Section
  • Client has total control of back-end activities















Be Properly Informed

 

Publishing no more a privileged few

The main broadsheet and television to a certain extent have always argued that the principle of reviewing books that are only published through well-renowned publishers had inbuilt quality control they could not do without. It now seems the quality control factor was merely a smoke screen for maintaining the old school boy network. This hitherto sacrosanct principle is now being reviewed,revised or ditched completely. There now seems to be a change in the wind - or to put it bluntly a revolution in the making. As more self-published authors hit the big time, that reputation (of vanity,flagrant ego etc,etc.) is definitely beginning to diminish. Self-published authors are now thought of as entrepreneurs, energetic souls determined to forge their own identity and destiny in the cultural landscape.


Anyone can get published

Here at Torome Tech, we have the expertise to help you bring your dreams to fruition. it is generally said that, everyone has got a book in their head. Be it fiction or non fiction. The problem has always been the expense in getting it published. Well to a certain extent that obstacle has been rendered obsolete. Not because of the caprices of the big publishing houses but due to innovation in technology and the increasing power designers and programmers have in affecting how information is presented and consumed on the Internet platform. Thus you do not have to have a physical book so to speak(i.e. printed) . Your book will reside on the internet to be consumed in a digital format only. That is to say people can read it on-line on their chosen platform (TV,desktop,laptop,tablet, or smart-phone). You can give it gratis or incorporate a charging scheme of your choice. This by and large, will be on a pay-access basis. Just in case you are one of those averse to digital books, the tangible option can easily be realised from this juncture. You just have to say the number of copies you want and it get send to the printers - and that is it. You only need to have your story out of your head and we will do the rest. Interested - talk to us.


Blog Posts On Site Design

Our Blog Post

Post Title

Post Title

Website Solutions

Search our Blog



Recent Posts

  • E-commerce Implementation    comment:  1

  • Greenpeace Activists Set Free    comment:  1

  • TERROR ATTACKS IN RUSSIA    comment:  1

  • Branding    comment:  1

Categories

Archive