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

Archive for the ‘Media’ Category

Player Framework is an open source video player framework for HTML5, Silverlight, Windows Phone and other platforms.

It offers a JavaScript API for controlling the player where the API methods are the same on both the HTML5 and Silverlight versions.

Such a consistency is very handy for using any of the versions as a fallback of the other with almost no extra coding.

HTML5 Player Framework

The framework has support for playlists using an array of media items or using a link to a media RSS feed.

W3C timed text (TTML) for captions can be used and there are controls like volume, mute, fullscreen, poster-displaying.

Player Framework is modular, can be extended easily and its look/feel can be customized using CSS.

  • Tags:
  • Filed under: Goodies, Media, Other License
  • 3 Comments
  • SCM Music Player is an open source and web-based music player application that is built on top of the popular JavaScript sound API:  SoundManager.

    The player sits on the top or bottom of web pages, has support for playlists where listeners can easily choose from and plays MP3, MP4, RSS podcasts or Youtube playlists.

    SCM Music Player

    Multiple skins exist to choose from and few options like default volume, autostart or shuffle playback helps helps customizing it more.

    By default, the player would work as an external player from the domain of the resource however, it can be downloaded and installed on your own domain pretty easily.

    MooVES is a MooTools plugin for easing and enhancing the integration of videos from popular video sharing websites (YouTube, Vimeo, Dailymotion, Facebook, Flickr, Google Videoi etc.).

    It is unobtrusive and displays the link to the video and a notice if JavaScript or Adobe Flash Player is not enabled.

    The plugin works by simply mentioning the URL of the media as a link and calling the MooVES function with targeting that element.

    MooVES

    There is no need to know the settings for each video service and a single function makes setting options (like width/height, background/foreground colors, autoplay or loop) possible.

    MooVES also has support for HTML5 video tag features (in beta).

    VideoBlocks, a fresh website offering professional footage, is giving away "3 Accounts with unlimited downloads for 1 month" to WRD readers.

    Joining the giveaway is a very easy process, just check the details at the bottom of this post.

    What is VideoBlocks

    Using videos when presenting a product, web app or almost any other content in the web is becoming more and more common each day.

    Although a production-from-scratch to make such videos attractive can be pricey, using VideoBlocks can help minimizing these costs.

    VideoBlocks

    It is a website providing unlimited downloads of 30,000+ stock videos, motion backgrounds, sound effects, production music, etc. to its members for a good price. And, these resources can be used in any type of projects (TV, web, radio..)

    VideoBlocks regularly adds new clips to their database and the ones presented are very well-categorized/tagged which makes searching pretty easy.

    There are videos/sounds on almost anything from explosions to nature, locations/places to animations or door sounds to dog barking ones that will help adding a twist to the footage being worked on.

    Also there are other categories like looping videos, slow motion, time-lapse or nature and animals with each having their own sub-categories.

    The footage presented is being used by well known companies like ABC, The History Channel, Discovery Channel and much more.

    P.S. VideoBlocks offers a free 7-day unlimited downloads for any sign-up.

    How to join the giveaway?

    Just comment to this post and the winners will be selected on 28 September 2011 (1 week later) with the query below:

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

    Good luck.

    Few days ago, FitText, a jQuery plugin that auto-arranges the size of fonts according to the size of the element wrapping them -so they don't break-, was shared at WRD.

    And now, it is FitVids.JS, again a jQuery plugin and a similar solution but, this time, for videos.

    It automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.

    FitVids.JS

    Usage is simple, just call the fitVids function by targeting a video and the element will be auto-wrapped with a <div> and CSS for resizing it will be applied.

    Currently, it is compatible with major services like Youtube, Vimeo, Blip.TV or Viddler.

    HTML5 audio and video is really great and very easy-to-use, however, they are not supported in older browsers and there isn't a consistency between modern browsers when it comes to file types.

    html5media is a JavaScript library that enables every browser to play the media defined inside the HTML5 media tags.

    For a compatible browser, the library doesn't interfere anything. For non-compatible ones (older or non-supported file type usage), the player is replaced with the Flash-powered FlowPlayer.

    html5media

    Even in the Flash-fallback, the library applies the settings defined inside the <audio><video> tags to the player (like poster image).

    html5media can be installed to your own website or a free-hosted-version offered for a quick usage.

    Yahoo! WebPlayer is a fresh web-based media player from Yahoo! which can be integrated into any web page with just inserting a line of JS code.

    It has support for many media formats including MP3, WMA, YouTube, Yahoo! Video, etc. and works automatically by scanning the related links/files in a web page and inserting a "play" button besides each of them.

    Yahoo! WebPlayer

    Once the "play" button is clicked, an in-page  (can be a good way to keep the users in the same page) and good-looking player appears with a nice slide effect that plays the media either in a tiny audio player or a video player.

    The player can even detect related media itself and link to them if the "term detection" mode is enabled.

    The API for the player is under development and it'll offer much more flexibility once launched.

    P.S. You'll remember the popular Yahoo! Media Player, WebPlayer is actually the next-generation of this product.

    With the wider use of HTML5 video and the increasing number of ready-to-use players around, it is hard to choose "which player to use".

    VideoSWS is a collection and comparison of HTML5 video players which helps finding the best and/or the most suitable player for your project.

    It lists all the well-known players, shows the features supported/unsupported under titles like Flash fallback, iOS compatibility, subtitles, audio, JS library required and more.

    Also, it is possible to test each player (with a default video or any custom input) and read personal comments of the VideoSWS creators about them.

    VideoSWS

    Cuepoint.js is a jQuery plugin for handling subtitles and creating cue-points in HTML5 video.

    It simply works by creating "an array of subtitles with the seconds" that they will be displayed.

    And, a setTime event that can be attached to any element helps skipping the media to the second mentioned.

    P.S. For subtitle, "for how long a subtitle will be displayed can not be mentioned but this can be accomplished by adding empty subtitles to the array.

    Cuepoint

  • Tags:
  • Filed under: Goodies, Media, Other License
  • 0 Comments
  • Buzz is a powerful JavaScript library for using HTML5 audio element very easily.

    It is a standalone library and has a very feature-rich API that can manage every feature the audio element offers.

    Besides controlling the main actions like play, pause, stop or volume controls, the advanced features like looping or getting the duration of the audio are just one function away.

    Buzz HTML5 JavaScript Audio Library

    Buzz has many functions to get info about the audio, the capabilities of the browser (if the given media type is supported or not) and extras like fadeIn/fadeOut for the sound.

    The library provides a solution to group sounds and many methods to control them which is great for handling multiple audio files at the same time.

    And, a set of events like ended, error or volumechange eases knowing what exactly is the status of the media and acting accordingly.

    P.S. The demo of Buzz is pretty fun and make sure you check it.

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com
    HotScripts Marketplace