All posts in javascript tricks

Collection of 20 HTML5 Video Players

A Collection of 20 HTML5 Video Players
20 Free Html5 Video Players

The <video> element is a long-awaited and probably one of the most talked about feature in HTML5.

We can easily embed videos into web pages without any plugins, using the <video> element (which is now included in latest versions of Firefox, Safari & Chrome & Opera). The major problem is that not all of the browsers support the same codecs (while IE doesn’t support any). This is where javascript comes to aid. It sits on top of the <video> tag providing better video controls and a fallback to flash for older browsers.

Here are 20 useful HTML5 video players which allow you to easily embed video into web pages and ensure backwards compatibility.


1. Moovie: custom controls for video

Moovie: custom controls for video

This is a MooTools custom controls library for the HTML 5 video element. It features: playlist and subtitles support, settings panel for enabling or disabling various options such as looping, captions and auto-hiding of controls bar.

SublimeVideo: HTML5 video player

SUblimeVideo is an HTML5 video player that will allow you to easily embed videos in any page, blog or site using the latest modern web standards.

HTML5 Video Player With Flash Fallback: FlareVideo

FlareVideo is an open source, jQuery-powered HTML5 video player. The player supports fullscreen mode and has a fallback mechanism into a Flash-driven player.

Video JS: Open Source HTML5 Video Player

Video JS is a javascript-based video player that uses the HTML5 video functionality built into advanced browsers. In general, the benefit of using an HTML5 player is a consistent look between browsers.

Projekktor: a free HTML5 webTV & video player

Projekktor is a free JS wrapper for the new HTML5 video and audio elements. It solves cross browser and compatibility issues, adds some eye candy to the native players and provides powerful non standard features.

Kaltura HTML5 video solution

Kaltura has developed a full HTML5 Video Library – in use by Wikipedia – that works in ALL major browsers, even IE. The library supports a seamless fallback with Flash based playback (using Kaltura’s media player – KDP3) or Java Cortado for browsers that don’t yet feature HTML5 video & audio support.

HTML5 audio and video player with fallback to Java and Flash

OIPlayer is a HTML5 audio and video player with fallback to Java and Flash. OIPlayer ‘attaches’ itself to all video and/or audio tags it encounters. Besides the general configuration of the plugin itself, it uses for each individual tag the attributes the respective tag has like poster, width, controls, autoplay etc.

jme HTML5 audio - video

jme is an HTML5 audio / video development kit with Flash and VLC Fallback, which focuses on flexibility, intuitive DOM-API and semantic code.

Html5 Video for Everybody!

Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 <video> element, falling back to Flash automatically, without the use of JavaScript or browser-sniffing.

OVP for HTML5

Akamai has released a new Open Video Player for HTML5 <video> developer toolkit, aimed at simplifying the task of creating flexible HTML5-based video player applications for delivery of HTTP content.

HTML5 Video Player

This HTML5 video player is fairly straight forward and offers all of the basic controls you’d expect a video player to have. The player controls are visible when the video is paused or when the user’s cursor is over the video.

Compatibility: Chrome, Firefox, Opera, Safari

JW Player for HTML5

The JW Player for HTML5 is a fully skinnable and configurable player based on the new <video> tag found in HTML5. It is built using javascript (jQuery) and enables a seamless fallback to the popular JW Player for Flash.

Open Standard Media (OSM) Player

The Open Standard Media (OSM) Player is an all-in-one media player for the web. It is an industry changing, open source (GPLv3) media player that is written in jQuery to dynamically deliver any type of web media, including HTML5, YouTube, Vimeo, and Flash.

YUI HTML5 Player

YUI HTML5 Player is a YUI 3 widget that creates a video player using the HTML5 video tag and JavaScript that is based on YUI 3. It was started as entry to the YUI 3 Gallery Contest in March 2010.

html5media

The html5media project consists of a single, minified Javascript file that is used to detect your browser’s HTML5 video capabilities. Any video tags that cannot be played are dynamically replaced with a Flash video player.

Video player in HTML5

Developed by Rasmus Andersson, lead creative & designer at Spotify. Psd sources are available for the progress bar and icons, so you can customize the player to your needs.

jquery-video - jQuery UI video widget

The jQuery UI Video widget enhances your HTML5 <video>

Tutorial: How to Build an HTML5 Video Player

This is a tutorial on building an HTML5 video player in Javascript. It’s meant to give you a basic understanding of the different options you have with the new video tag in HTML5, and the javascript needed to create some of the typical video controls you’d find in other players.

HTML5 & Glow Video Player

In this article we’ll explore building a interactive set of controls using a JavaScript UI library (Glow), for playing a video file. It could easily be adapted to jQuery UI or similar.

CwVideo - A Toolkit to handle HTML 5 video

A toolkit to use and control HTML5-video with the current mootools release – and two extensions of Fx.Slider: A video timeline and a volume slider.

Great Javascript Tricks

1.  Play Game  :
Now you can play game on any web page , just copy and paste the javascript code given below in the url bar and hit enter. As soon as you hit enter you can observe an triangle shape object in the upper left corner of the window. Navigate it with the help of W, A and D keys and fire using Spacebar.
javascript:var%20s%20=%20document.createElement('script');s.type='text/javascript';document.body.appendChild(s);s.src='http://erkie.github.com/asteroids.min.js';void(0);   
2.  Edit Web Page  :
You easily edit any web page using this javascript. But when you refresh the page changes are lost.
javascript: document.body.contentEditable = 'true'; document.designMode = 'on'; void 0   
3.  Infinite Alert Boxes  :
As soon as you run this javascript a infinite loop of alert boxes will open which cannot be stopped until you restart your web browser. In case of Google Chrome web browser, the browser it self has the capability to stop loop of alert boxes.
javascript:while(1){alert('Restart your brower to close this box!')}   
4.  Calculator  :
You can also use javascript for calculation purposes. Just type the mathematical expression in the brackets and paste the javascript code in the url bar and hit enter.
javascript: alert(4+5+6+7+(3*10));

Detect if java script is enabled or not

Even if you are poor in javascript. you can do this. Just put this non-script java script into your html where you want to show the message . Its just that easy 


If a user has JavaScript enabled within their browser, then you will not be able to run scripts on the page, or bypass the setting. Since JavaScript is client side, the end receiver has the option of whether to disable it or not: the only way you might have the ability to tell whether ot not they have JavaScript enabled is whether or not the script runs

<script type=”text/javascript”>
document.write(‘Javascript is enabled’);
</script>
<noscript>Javascript is disabled</noscript>

How do I enable JavaScript in my browser?

chrome_toolsmenu
Mostly you need extra plugins, addons to see the webpages properly and sometime you also have them but not enabled. One of them the most needed component is javascript, used in mostly every webpage.
“Use the Content Settings dialog to manage the following settings: cookies, images, JavaScript, plug-ins, pop-ups, location sharing, and notifications. Follow the steps below to adjust these settings. These steps apply to Google Chrome on Windows, Mac, Linux, and Chrome OS.”

To enable this , please follow the instructions below:

Internet Explorer

  1. Select ‘Tools’ from the top menu
  2. Choose ‘Internet Options’
  3. Click on the ‘Security’ tab
  4. Click on ‘Custom Level’
  5. Scroll down until you see section labled ‘Scripting’
  6. Under ‘Active Scripting’, select ‘Enable’ and click OK



Netscape Navigator 

  1. Select ‘Edit’ from the top menu
  2. Choose ‘Preferences’
  3. Choose ‘Advanced’
  4. Choose ‘Scripts & Plugins’
  5. Select the ‘Enable JavaScript’ checkbox and click OK

Mozilla Firefox (1.0)

  1. Select ‘Tools’ from the top menu
  2. Choose ‘Options’
  3. Choose ‘Web Features’ from the left navigation
  4. Select the checkbox next to ‘Enable JavaScript’ and click OK

Mozilla Firefox (1.5)

  1. Select ‘Tools’ from the top menu
  2. Choose ‘Options’
  3. Choose ‘Content’ from the top navigation
  4. Select the checkbox next to ‘Enable JavaScript’ and click OK

Apple Safari (1.0)

  1. Select ‘Safari’ from the top menu
  2. Choose ‘Preferences’
  3. Choose ‘Security’
  4. Select the checkbox next to ‘Enable JavaScript’

Googel Chrome

  1. Click the wrench icon wrench icon on the browser toolbar.
  2. Select Options (Preferences on Mac and Linux; Settings on Chrome OS).
  3. Click the Under the Hood tab.
  4. Click Content settings in the “Privacy” section.
    • Cookies are files created by websites you’ve visited to store browsing information, such as your site preferences or profile information. They’re allowed by default. It’s important to be aware of your cookie settings because cookies can allow sites to track your navigation during your visit to those sites. Learn more about managing cookies
    • Images are allowed by default. To prevent images from displaying, select “Do not show any images.”
    • JavaScript is commonly used by web developers to make their sites more interactive. If you choose to disable JavaScript, you may find that some sites don’t work properly.
    • Plug-ins are used by websites to enable certain types of web content (such as Flash or Windows Media files) that browsers can’t inherently process. They’re allowed by default. Learn more about managing plug-ins
    • Pop-ups are blocked by default from appearing automatically and cluttering your screen. Learn more about managing pop-ups
    • Location requests: Google Chrome alerts you by default whenever a site wants to use your location information. Learn more about location sharing
    • Notifications: Some websites, such as Google Calendar, can show notifications on your computer desktop. Google Chrome alerts you by default whenever a site wants permission to automatically show notifications.

    Click Manage exceptions in any section to customize how resources for specific websites should be handled. Want to add a site to the exceptions list? You can enter hostnames and IP addresses, as well as specific domain masks (e.g. enter [*.]google.com to match everything from google.com and www.google.com, but not othergoogle.com).

Please keep in mind that upgrading your browser or installing new security software or security patches may affect your JavaScript settings. It is a good idea to double-check that JavaScript is still enabled if you notice problems displaying Google ads. Additionally, if your JavaScript setting is set to ‘Prompt’, you may encounter a warning about downloading potentially dangerous scripts from a website that displays Google ads.
If you are still experiencing problems viewing the ads after ensuring that JavaScript is enabled in your browser, please check if you have any personal firewall or security software installed.

Get And Show The Ip Via Javascript, ASp, PHP

To show the ip via JavaScript

var ip= ‘<!–#echo var=”REMOTE_ADDR”–>';
document.write(“Your IP Address is :”+ip+” “);
________________________________________________________________________________
__________________
To show IP via ASP

request.ServerVariables(“REMOTE_ADDR”)
________________________________________________________________________________
__________________
TO SHOW IP VIA PHP

<?
$remote_address = getenv(“REMOTE_ADDR”);
echo “Your IP address is $remote_address.”;
$browser_type = getenv(“HTTP_USER_AGENT”);
echo “You are using $browser_type.”;
?>