HTML5 MP3 Lyrics Player


Hits: 6339  

HTML5 Lyrics Karaoke Player Plugin enable wordpress users to sing and play song text lyrics.

Free Features

  • Supports MP3 formats
  • Supports Text Song Lyrics
  • Social Links Facebook / Twitter
  • Works in IE, Safari, Firefox, Chrome, Opera
  • Player have shortcode for post/page [html5lyrics id=ID] i.e. [html5lyrics id=1]

Paid Features

  • Supports MP3 formats
  • Supports Text Song Lyrics
  • Support Images on song’s cue points
  • Color / Size Customization
  • Supports Unicode
  • Social Link Customization
  • Multiple player on same page / post
  • Works in IE, Safari, Firefox, Chrome, Opera, mobile devices including Android/iOS
  • Supports Wowza / Amazon Cloud Front / S3 HTTP Streaming
  • Facebook page customization with player
  • Player have shortcode for post/page [html5lyrics id=ID … ] i.e. [html5lyrics id=1 … ]
  • Best support on email / skype

Note: It uses native <audio> where available and an invisible flash player to emulate <audio> for other browsers.
It provides a consistent html player UI to all browsers which can be styled used standard css.

Browser & format support

With Flash as a fallback, it should work pretty much anywhere.

It has been verified to work across:

– Mobile Safari (iOS 3+)
– Android (2.2+, w/Flash), Android (4.0+)
– Safari (4+)
– Chrome (7+)
– Firefox (3+, w/ Flash)
– Opera (10+, w/ Flash)
– IE (6, 7, 8, w/ Flash)

Get fully customized HTML5 Lyrics Karaoke Player for Website Buy Now or Contact Us

Standalone

Credit

Audio.js Player

HTML5 Audio Read-Along

Javascript Widget versues iFrame


Hits: 3737  

I was creating a HTML5 Video Ads widget for my clients websites. So if I need to make it in JavaScript or iFrame?

<iframe src=”http://html5.svnlabs.com/videoads/16″></iframe>

But I don’t think iFrame would be the best method, if I need to hide URL from direct access.

Another option is something like this:

<script type=”text/javascript”>id = ’16’;</script>

<script src=”http://html5.svnlabs.com/videoads/” type=”text/javascript”></script>

 

iFrame

– Resizing is typical to the parent window without smart work.
– Better isolation cannot access anything on the parent page.
– No JavaScript experience required.
– Own independent CSS styles.
– Functional on scripting disabled.

 

JavaScript

– Full access to the parent page.
– Slow down page as script load before rendering the rest of the page.
– Experience with JavaScript needed on parent page.
– Experience with CSS styles needed on parent page.

 

So here is conclusion 😉

* You have more control on the design in case of an iFrame.
* iFrame is better in terms of security because cookies stored are different.
* JavaScript widget needs more care on other JavaScript conflict.
* Use JavaScript that writes an iFrame dynamically to avoid direct URL access.

 

PHP JavaScript Mobile Detect


Hits: 4222  

Mobile_Detect is a lightweight PHP class for detecting mobile devices. Mobile_Detect uses the user-agent string with specific HTTP headers to detect the mobile environment.

Cross Browser Testing Tool - BrowserStack
Cross Browser Testing Tool – BrowserStack

Complete Mobile Testing: BrowserStack is a complete browser coverage tool (including mobile devices) for testing you web application.

Open source mobile phone detection

http://detectmobilebrowsers.com/

HOW TO DETECT MOBILE DEVICES USING JQUERY

http://www.jquery4u.com/mobile/detect-mobile-devices-jquery/

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};
Mobile Web
Mobile Web

These days mobile is not a simple stand alone technology. We can help you to detect mobile access for your brand memorable in a personalised and interactive way. We offer complete mobile development solutions that will integrate into your existing marketing/development platform. We offer you a solution that will be functional across across all mobile devices and browsers. Our solutions are developed in open-source technologies to ensure that there is no technology lock-in for our clients.

Thank you for visiting svnlabs.com, If you have any questions regarding the contents published in svnlabs.com then kindly contact us via email, we appreciate your feedback and promise you better services…

Email: info [at] svnlabs.com

Mobile: +919928673578

Skype: svnlabs

Twitter: http://twitter.com/svnlabs

FaceBook: http://www.facebook.com/svnlabs

Linkedin: http://www.linkedin.com/in/svnlabs

Concentrate > Observe > Imagine > Launch

SponsorPay API in PHP


Hits: 4065  

SponsorPay – International Leader in Engagement Marketing and Performance Advertising for the Monetization of Virtual Currency and Digital Content on Social Networks, Online Games, Virtual Worlds and Entertainment Platforms.

Mobile Developers - SponsorPay
Mobile Developers – SponsorPay

Key Features:

* Boost branding and engagement
* Acquire users and improve engagement
* Engage and monetize all your users
* Drive customer acquisition and sales
* Grow revenues with innovative products
* Achieve true glocal monetization

SponsorPay Products

* Offer Wall
* Layover Offer Wall
* Offer Banners
* Offer Bar
* Offer Widget
* BrandEngage

SponsorPay Mobile Offer API

JSON Format
http://api.sponsorpay.com/feed/v1/offers.json?appid=[APP_ID]&uid=[USER_ID]&ip=[IP_ADDRESS]&locale=[LOCALE]&device_id=[DEVICE_ID]&ps_time=[TIMESTAMP]&pub0=[CUSTOM]&timestamp=[UNIX_TIMESTAMP]&offer_types=[OFFER_TYPES]&android_id=[ANDROID_ID]&hashkey=[HASHKEY]

XML Format
http://api.sponsorpay.com/feed/v1/offers.xml?appid=[APP_ID]&uid=[USER_ID]&ip=[IP_ADDRESS]&locale=[LOCALE]&device_id=[DEVICE_ID]&ps_time=[TIMESTAMP]&pub0=[CUSTOM]&timestamp=[UNIX_TIMESTAMP]&offer_types=[OFFER_TYPES]&android_id=[ANDROID_ID]&hashkey=[HASHKEY]

<?php

// Step 1: Gather all request parameters

$page = isset($_REQUEST['page'])?$_REQUEST['page']:"1";
$uid = isset($_REQUEST['uid'])?$_REQUEST['uid']:"svnlabs";
$pub0 = isset($_REQUEST['pub0'])?$_REQUEST['pub0']:"sv";
$appid = isset($_REQUEST['appid'])?$_REQUEST['appid']:"APP-ID";
$device_id = isset($_REQUEST['device_id'])?$_REQUEST['device_id']:"DEVICE-ID";
$ip = isset($_REQUEST['ip'])?$_REQUEST['ip']:"IP-ADDRESS";
$apikey = isset($_REQUEST['apikey'])?$_REQUEST['apikey']:"API-KEY";
$format = isset($_REQUEST['format'])?$_REQUEST['format']:"json";

$requestring = 'http://api.sponsorpay.com/feed/v1/offers.'.$format.'?';

$d = array(   
        'appid' => $appid,
        'device_id' => $device_id,
        'ip' => $ip,
        'locale' => 'en',
        'page' => $page,
        'pub0' => $pub0,
        'timestamp' => time(),
        'uid' => $uid,
    );
    
    
//Step 2: Order all request alphabetically    
    
ksort($d);

//Step 3: Concatenate all request parameters

$params = '';

foreach($d as $k=>$v)
{
  $params .= $k."=".$v."&"; 
}    

//Step 4: Concatenate the resulting string with your API Key
//Step 5: Hash the resulting string using SHA1

$hash = sha1($params.$apikey);

$url = $requestring.$params."hashkey=".$hash;

echo file_get_contents($url);

?>

 

SponsorPay is a really good solution for social media platform using more engaging ad units than traditional social media formats.

Android HTML5 Audio duration and loadProgress in audio.js


Hits: 5717  

audio.js is a drop-in javascript library that allows HTML5’s <audio> tag to be used anywhere.

HTML5 Audio Js Duration Buffered

AudioJS uses native <audio> where available and an invisible flash player to emulate <audio> for other browsers. AudioJS provides a consistent html player GUI to all browsers which can be styled used standard CSS.

But I faced a issue in audio.js html5 player, the audio preload, duration and buffer was not working 🙁

Hope this will save your time .. please find modified javascript

loadProgress: function() {
      if (this.element.buffered != null && this.element.buffered.length) {
        // Ensure `loadStarted()` is only called once.
        if (!this.loadStartedCalled) {
          this.loadStartedCalled = this.loadStarted();
        }
        var durationLoaded = this.element.buffered.end(this.element.buffered.length - 1);
        this.loadedPercent = durationLoaded / this.duration;

        this.settings.loadProgress.apply(this, [this.loadedPercent]);
      }
      else
      {
      // audio duration in Android
      if (!this.loadStartedCalled) {
          this.loadStartedCalled = this.loadStarted();
      }

      var durationLoaded = this.element.buffered.end(this.element.buffered.length - 1);
        this.loadedPercent = durationLoaded / this.duration;

        this.settings.loadProgress.apply(this, [this.loadedPercent]);

      }

    },

Modified file

audio js duration in android

On Android ICS 4 you might load and play audio with delay

setTimeout(function() {
            audio.load(src);
            audio.currentTime = 0;
            
            setTimeout(function() {
                audio.play();
            }, 500);
        }, 500);

Red5 Media Server iOS Android Setup


Hits: 11771  

Hope you already read our previous article “VOD to iOS” ?

 

How you can use Red5 Server for streaming to iPhone, iPads and Android?

S V N Labs Softwares implements an iOS/Android add-on setup for Red5 Server to stream both Flash, iOS and Android devices. This add-on also supports setup of JW Player, Flowplayer and HTML5 embed player using Red5 live and on-demand streams. We are expert in setting up Red5 applications and developing custom apps and plug-ins for Red5 and other media servers including Wowza, Flash Media Server, Union etc.

Red5 Recorder allows wordpress users to easily use Red5 Recorder Player on their website to record Video / Audio Streams.
Users can record their video response / review using embedable red5 recorder and after recording they can send video email to wordpress admin. Both user and admin will get email from Red5 Recorder system to get Red5 Recorded Video Streams.

Red5 includes support for the latest multi-user API’s including NetConnection, NetStream and SharedObject’s while providing a powerful RTMP / Servlet implementation. In addition to support for the RTMP protocol, the application server has an embedded Tomcat Servlet container for JEE Web Applications. Application development draws additional benefits from the Spring Framework and Scope based event driven services.

Open Source Red5 Media Server also help you for developing extensible platform that can be used in Video Conferences, Multi-User Gaming and Enterprise Application Software. S V N Labs Softwares are also expert in RED5 and most other media servers including Wowza, Flash Media Server, Union etc. and we can assist to set up transcoding, segmenting, and ipad/iphone/android server-side configuration.

Get more help for HTTP Live Video Stream Segmenter and Distributor Contact Us

Pay Per Plugin for HTML5 Media


Hits: 2885  

The Pay Per Media Plugin is embedded stand-alone, e-commerce-powered JavaScript and iFramed widget.

Features:

1. Delivers on-demand audios / videos / books
2. PayPal with sandbox support
3. Supports Preview and Full Media using JW Player
4. No Popups
5. JavaScript and i-Frame widgets
6. Tracks user’s payment using PayPal Transaction ID
7. XML based media management
8. Widget customization for size and color
9. Supports video ads on cue points

Widget customization for size and color

Pay Per Media Plugin can be used on any web page including Facebook Fan Page. Pay Per Media Plugin uses PayPal store owner email account for payment.

Easy switch from PayPal Sandbox to Live PayPal

Screen 1

payper

Screen 2

VOD to iOS


Hits: 6361  

FFMpeg to encode and segment input video stream in the correct format for HTTP streaming protocol.

Download & Install HTTP Live Video Stream Segmenter and Distributor

# /usr/local/bin/live_segmenter <segment length> <output location> <filename prefix> <encoding profile>

 

M3U8 File:

#EXTM3U
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:1
#EXTINF:10,
http://ip-address/streamingvideo/test.m3u8-00001.ts
#EXTINF:10,
http://ip-address/streamingvideo/test.m3u8-00002.ts


….

#EXTINF:10,
http://ip-address/streamingvideo/test.m3u8-00011.ts
#EXT-X-ENDLIST

Errors:

Segmenter error: Could not open input file, make sure it is an mpegts file:

ffmpeg: relocation error: /usr/local/lib/libavfilter.so.1: symbol av_expr_free, version LIBAVUTIL_50 not defined in file libavutil.so.50 with link time reference

Point FFMpeg to the proper files

# export LD_LIBRARY_PATH=/usr/local/lib

OR

# sudo ldconfig -v

We worked on RTMP (Live Red5 CAM) to iOS (iPhone or iPad). Get more help for HTTP Live Video Stream Segmenter and Distributor Contact Us

RTMP (Red5) -> FFMpeg -> Segementer -> .ts files -> iOS (m3u8)

Helpful links:
C++ RTMP Server – http://www.rtmpd.com/
mpegts-segmenter – https://github.com/ElegantCloud/mpegts-segmenter