Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Media’ Category

Digital media has become much more streamable in recent years. Faster Internet speeds allow uploaders and streamers to consume media at a more hasty pace. This advancement has created a world where developers can build amazing media players with much less code than ever before. The following audio players are completely free and super easy to add into any website. Take a peek at each example to see if any could be useful in your own project work.

Codrops Audio

Read the rest of this entry »

AngularJS is the JavaScript MVW Framework choice of many web developers as it simplifies creating dynamic views in web-applications while staying readable.

Videogular is a lovely HTML5 video player that is specifically created for AngularJS-powered apps and integrates to them perfectly.


It comes with bindable directives, a plugin system for extending further and support for theming.

There is native full-screen mode and the player works smartly on mobile with showing/hiding the unsupported features.

Once, Flash was the standard to serve audio + video through web and a single format was enough to display them nicely.

Right now, HTML5 is the standard and browsers + devices expect different file formats., a professional encoding service, simplifies converting media from one type to another and it supports video, audio and images.

With the help of an API or web interface, we can send our encoding requests and get the converted files very quickly. We can even define where those files will be placed (like Amazon or Rackspace clouds).

There is no need to know which formats are required for a specific job. There are presets for popular use cases (for mobile, HTML5 browsers, Flash, etc.) and can handle the rest.

The service is also capable of editing the media like adding watermarks, split screen, picture-in-picture, resizing or cropping them. - HTML5 Ready also integrates tightly with their “universal video URL” service which simplifies things even more for some uses.

This is a very handy service for “any size usage” whether there is a batch or single job to be processed and there are plans for all, including a free plan.

P.S. This post is a sponsored review.

HTML5 video is awesome and makes consuming video on multiple devices so easy.

However, it also has its own problems: the videos run on the native video player in mobile devices which makes interacting with the rest impossible (or displaying multiple videos at the same time) and different versions are required for browser compatibility.

Frame Player

Frame Player is an original method to display video; it uses JSON data (of data URIs) and the video is mimicked by showing the images frame-by-frame.

It is compatible with all browsers, can be customized however preferred and PHP + Nodejs converters are available.

Considering there will be no streaming, it is a good idea to prefer to player on short videos.

  • Tags:
  • Filed under: Goodies, Media, MIT License
  • Users with modern browsers are increasing each day and making use of features like HTML5 audio sounds more and more logical.

    AudioPlayer.js is a jQuery plugin for quickly placing a HTML5-powered audio player to any web page.

    jQuery HTML5 Audio Player

    The player’s interface is chic (doesn’t use any images for that), has a responsive layout and touch support.

    It has the major controls (play/pause, volume and duration) and weights only 4kb.

    Displaying video on websites is both easy and hard as a good video experience usually requires a custom-styled, cross-browser and fast player.

    Flowplayer, the popular HTML5 video player, offers a great experience with a completely customizable feature set.


    One of the most important things when playing video is probably the browser support. The player does that perfectly with HTML5 by default and falling back to Flash when needed.

    Flowplayer’s interface is completely customizable and it comes with 3 beautiful skins. Also, its layout is fluid and works in any screen size with no extra settings.

    There is a web-based designer to create a completely new skin and also see how flexible it is.

    It can be controlled very easily (keyboard and touch events support) and offers a (native) fullscreen mode too.

    FlowPlayer - Skinnable

    Cuepoints can be defined for any video, sub-titles can be added and the videos can even be displayed in slow-motion.

    For a better customization, any HTML can be shown when the videos are preloading and once they are ended (good for presentations and branding).

    Flowplayer integrates well with Google Analytics and can track “how long a video is played, how many times it is played and in which format (HTML5 or Flash).

    Each video file is embeddable (if enabled) with the help of a share button that auto-generates an embed link.

    FlowPlayer - Cross Browser

    All the functionality of the player can be controlled with a powerful API and it has callbacks on every level to interact with any event.

    The player is open source and free to use under the GPL license. For commercial use, it requires a license.

    And, Flowplayer team provides great support (paid support exists) and an active user community that discusses on their product forum.

    How to join the giveaway?

    Flowplayer is giving away 3 * Commercial licenses ($95 value/each) and in order to join:

    • please comment to this post

    And, the winners will be selected randomly on 06 May 2013 (1 week later) with the query below:

    SELECT * FROM wp_comments WHERE comment_post_id=4037 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

    Good luck to all.

    The winners

    Here they are:

    • bigcloud (comment #1263775)
    • Techspy (comment #1263756)
    • Federico Garcia (comment #1263809)


    Today, creating cool videos for any platform (web, TV, etc.) is not that hard with the help of high-quality footage.

    VideoBlocks is a professional stock footage website to find 100,000+ stock videos, motion backgrounds, sound effects, production music and more.

    Info: VideoBlocks is giving away 3 * 1 month (unlimited downloads) subscriptions ($79 value/each) to WRD readers and details can be found at the end of this post.


    The website has a huge library which is well-categorized (slow-motion, nature, people, locations or cartoon, ambiance, horror.. for sounds) which eases browsing and locating the right resources.

    In contrary to what you would expect, they are offered for a good price with a single plan of “unlimited downloads”. They can be used in any type of projects and no additional fees for that.

    VideoBlocks’ library grows regularly with new resources being added each day and their footage is already being used by media giants ABC, MTV or National Geographic.

    VideoBlocks Listing

    How to join the giveaway?

    Commenting to this post is enough. Winners will be selected on 27 March 2013 (1 week later) with the query below and announced as an update to this post.:

    SELECT * FROM wp_comments WHERE comment_post_id=3885 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

    Good luck.

    The winners:

    • dlv (comment #1182947)
    • Luca (comment #1182707)
    • pablo luis rey (comment #1186747)

    Congratulations to the winners and thanks to everyone for joining.

    The Web Audio API that is developed by Google is easier to work with and has more features compared to alternatives. But, it still lacks of browser support.

    Howler.js is a JavaScript library that works with Web Audio API by default and falls back to HTML5 Audio when not supported.


    It accepts multiple file formats for cross-browser compatibility, has caching and can play many sounds at the same time (it is also mute/un-mute them one-by-one or globally).

    The sounds can be looped, a fadeIn/fadeOut effect exists and standard media controls are just a part of the library.

    It is lightweight (5kb), has support for chaining methods and doesn’t require any JS frameworks.

    HTML5 audio is awesome, so easy to implement and works fast. The only thing that can stop you from using it is the lack of support for older browsers.

    Audio5js is a lightweight JavaScript library that solves this compatibility issue nicely.

    It provides support for multiple codecs and fallback to a Flash-powered MP3 player when needed.


    The library auto-detects the browser, knows its capabilities and loads the right player with the right codec.

    An API exists for controlling the player and has the functions for “load, play, playPause, pause, volume and seek”.

    Also, there are methods for getting the details (playing, duration, position, load-percent, seekable or not) of the item being played

    SoundCloud is an awesome application with a huge music library and it has multiple ways for integrating any selected tracks to websites.

    Stratus, a free-to-use and jQuery-powered widget, offers an alternative and tight integration with a player that can sit in the bottom or top of web pages.

    The widget accepts any number of tracks, sets, users or groups to play, can be set to auto-play and has an optional animation on initial load.

    Stratus SoundCloud Player

    There are controls for volume, sharing, commenting/favoriting and a pop-up player link exists so that users changing pages won’t lose the tracks.

    Besides mentioning the tracks/sets as a list, adding a custom class to any SoundCloud link also works (handy for websites with lots of SoundCloud links) and the player can be skinned with CSS.

    Uptime Robot