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

Archive for the ‘Media’ Category

Accessible Audio Player (AAP) is a cross-browser audio player with playlist support that is created for people with disabilities in mind.

It uses the HTML5 <audio> element for browsers that support it, and the Yahoo! Media Player for those that don’t.

Accessible Audio Player

If a browser can't use any of the options above, the player displays a list of links to the mp3 files.

The player can switch to the next track automatically or with the help of prev-next buttons and its voice can be controlled.

There is also a WordPress plugin for AAP for easier integration with the CMS application.

LeanBack Player is an open source HTML5 video player that doesn't rely on any JavaScript frameworks.

It has support for subtitles using HTML5 track element and language-selection by label attribute of track (yes, subtitles can be multilingual).

LeanBack HTML5 Video Player

The player has built-in fullscreen mode, volume controls (mute on/off and volume bar) and can handle multiple videos in a single page.

Almost every action can be done via keyboard controls besides standard usage.

LeanBack Player works in all popular browsers and falls back to Flash if HTML5 video is not supported.

jQuery Webcam is a plugin which creates a transparent layer for communicating with a camera directly in JavaScript.

It takes advantage of a SWF file (comes with the source) and can display the webcam output + capture images.

jQuery Webcam

The plugin is capable of displaying the list of cameras available and selecting any of them.

Video to be streamed can be any size (however, this can require a recompile of the SWF file which is described in the documentation).

FryPlayer (Google-translated English version) is an open source and easy to use HTML5 video player.

The player is actually a jQuery plugin and has very nice features like the ability to skin, buffering, full screen mode and keyboard shortcuts.

It is also possible to set the width-height and initial volume of the player.

HTML5 FryPlayer

  • Tags:
  • Filed under: Goodies, Media, Other License
  • 4 Comments
  • There are various video sharing services, like Youtube or Vimeo, in the web that can host and serve the files for us which is great.

    However, there are cases that these services may not be a good fit like "unbranded videos", "custom sizes", a custom player, etc. This is when we usually need to convert/encode our videos to make them ready for the web.

    And there are multiple formats like the popular FLV or HTML5 video formats like OGG, h.264 and WebM where you may need multiple versions of the same video for maximum compability.

    Here are free video converter applications that support these formats to help you complete this process easily:

    Miro Video Converter (Windows & Mac)

    Miro Video Converter

    A very simple but powerful application to convert any video into MP4, WebM (vp8), Ogg Theora, or for Android, iPhone, and more.

    Miro Video Converter is open source and has presets to convert videos into selected device with the right size + format.

    Freemake (Windows)

    Freemake Video Converter

    Freemake is a feature-rich video converter that supports too many formats from avi, wmv, flv or swf to mp3, ogg, aac, wma and much more.

    The program also has built-in video editing, photo slideshow creation and burning the outputs to DVD.

    Read the rest of this entry »

    HTML5 video is great as it doesn't require any 3rd party plugins and works in most mobile browsers. However, it is not supported in every browser.. yet.

    Also, browsers supporting the <video><audio> tags require different codecs and have inconsistent player UIs.

    MediaElement.js

    MediaElement.js is a jQuery plugin which enables you to use the <video> tag with one H.264 file (you can also include OGG or WebM, but you don't have to).

    If the player doesn't support it, the plugin replaces the player with a Flash or Silverlight-powered one.

    There is also MediaElementPlayer.js for building a complete player that looks and functions the same in all browsers.

    Moovie is a free MooTools custom controls library for the HTML5 video element.

    It includes all the features of a player: play, pause, stop, a volume control which mimics the Youtube's control and progress bar.

    Moovie - MooTools HTML5 Video Player

    On initial load and when the video is paused, the player displays a "big play button" and a replay button at the end of the file.

    Moovie has playlist (for multiple videos) and captions support. And, with the help of a settings panel, it is possible to enable or disable various options such as looping, captions and auto-hiding of controls bar.

    P.S. The download can be currently found within the source of the demo.

    jMediaelement is a jQuery HTML audio-video development kit with can fallback to Flash and VLC for incompatible browsers.

    It makes creating a media element so easy by just calling a function and also controlling it on every level (play-pause-mute, getting the duration, etc.).

    jMediaelement

    The player is totally CSS stylable from the frame to the images of the controls.

    jMediaElement supports all major file formats including; ogg (theora/vorbis), mp4/mov (h.264), WebM (VP8/vorbis), flv, Youtube videos and more.

    FlareVideo is an open source and free HTML5 video player that falls back to Flash for incompatible browsers.

    The player can be customized easily using CSS-HTML and JS with its theming support (and already ships with 3 themes: default, spotify and Vimeo).

    FlareVideo - HTML5 Video Player

    It is built on jQuery + jQuery UI and supports:

    • fullscreen
    • autoplay
    • custom keyboard shortcuts
    • preloading – autobuffering
    • and more..
  • Tags:
  • Filed under: Goodies, Media, MIT License
  • 7 Comments
  • Video JS is a JavaScript-based HTML5 video player that falls back to Flowplayer for unsupported browsers .

    The player supports H.264, Theora OGG and the new Google-powered WebM formats.

    It is lightweight, doesn't use any images and can be totally skinned with CSS.

    Also, it does not depend on any JavaScript frameworks, has support for fullscreen and volume controls.

    Video JS

    Uptime Robot
    feed-holder
    FeedBurner
    HotScripts Marketplace
    PSD2HTML.com