Web programming tips and tricks : June 2014

Sunday, June 15, 2014

HTML5 Video & Audio Player

Video add in webpage (Html) . below code below version html 5.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>
Also some above problem , And as you know, you need Flash for this. Or it is often delivered via JavaScript as well so it is not perfect.

The HTML 5 way Nice, clean, minimal code:

<video width="640" height="360" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
<p> Try this page in a modern browser! Or you can <a href="http://video-js.zencoder.com/oceans-clip.mp4">download the video</a> instead.</p>
Solution

HTML5 Video & Audio Player- no video with support format or mime type found? in firefox
Please Create .htaccess files root folder and put here below code

AddType video/mp4 mp4 m4v
AddType audio/mp4 m4a
AddType video/ogg ogv
AddType audio/ogg ogg oga
AddType video/webm webm

The <video> element has several special attributes that can change or enhance its default behavior.

autoplay*	Tells the browser to immediately start downloading the video and play it as soon as it can. Note that mobile browsers generally do not support this attribute, the user must tap the screen to begin video playback.
preload	Hint to the browser about whether optimistic downloading of the video itself or its metadata is considered worthwhile. Options are: none - Hints to the browser that the user likely will not watch the video, or that minimizing unnecessary traffic is desirable. metadata - Hints to the browser that the user is not expected to need the video, but that fetching its metadata (dimensions, first frame, track list, duration, and so on) is desirable. auto - Hints to the browser that optimistically downloading the entire video is considered desirable.
poster	Provides an image to show before the video loads
controls*	Shows the default video controls (play, pause, etc)
height & width	Sets the width and height of the video in CSS pixels
loop*	Tells the browser to automatically loop the video
muted*	Mutes the audio from the video

*indicates a binary attribute, which enables that behavior when the attribute is present, or has it's value set to anything.

Monday, June 9, 2014

On Mouse over show cover using css

Follow code very useful. mouse over the images, show cover as light color( according change color in css) and also given text link.

Download This image "googleimg.jpg"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>On Mouse over show cover using css</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
.overlap { position:relative; -moz-box-sizing: border-box; box-sizing:border-box; -webkit-order-sizing:border-box; margin: 1.5px; width:22%; }

.overlap .innershadow { z-index: 50; width:100%; height:3px; position:absolute; top:0px; left:0px; -webkit-box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.25); -moz-box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.25); box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.25); }

.overlap .cover    { width:100%; height:100%; position:absolute; top:0px; left:0px; background: #000; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; -moz-opacity:0.0; filter:alpha(opacity=0); opacity:0; -webkit-box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.25); -moz-box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.25); box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.25); }

.overlap .link    { cursor:pointer; position:absolute; left:50%; top:49%; background: rgba(0, 0, 0, 0.25) url(link.png) no-repeat; width:40px; height:40px; margin-left:-20px; -webkit-transition: all 0.15s; -moz-transition: all 0.15s; -o-transition: all 0.15s; -ms-transition: all 0.15s; -moz-opacity:0.0; filter:alpha(opacity=0); opacity:0; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; }

.overlap .show    { cursor:pointer; position:absolute; right:50%; top:49%; background: rgba(0, 0, 0, 0.25) url(zoom.png) no-repeat; width:40px; height:40px; margin-right:-20px; -webkit-transition: all 0.15s; -moz-transition: all 0.15s; -o-transition: all 0.15s; -ms-transition: all 0.15s; -moz-opacity:0.0; filter:alpha(opacity=0); opacity:0; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; }
.overlap .itemtitle    { bottom:51%; cursor:pointer; text-transform:uppercase; position:absolute; width: 100%; text-align: center; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; -ms-transition: all 0.1s; -moz-opacity:0.0; filter:alpha(opacity=0); opacity:0; margin-left: 0px; }

.overlap .itemtitle a { color: #fff; font-weight: 800; font-size: 15px; }

.overlap .itemcategories { float: left; color: #aaa; font-weight: 400; font-size: 12px; text-transform:uppercase; cursor:pointer; width: 100%; text-align: center; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; -moz-opacity:0.0; filter:alpha(opacity=0); opacity:0; margin-top: 6px; }

.overlap .itemcategories a { color: #aaa; font-weight: 400; font-size: 12px; }
.mr .overlap, .ml .overlap { margin: 0; }
.link.notalone { left:50%; margin-left:-45px;}

.show.notalone { right:50%; margin-right:-45px;}

.overlap:hover .link, .overlap:hover .show, .overlap:hover .itemtitle, .overlap:hover .itemcategories {    -moz-opacity:1.0; filter:alpha(opacity=100); opacity:1; }
.overlap:hover .cover {    -moz-opacity:0.75; filter:alpha(opacity=75); opacity:0.75;}
.overlap .link:hover    { background: rgba(255, 255, 255, 0.1) url(link.png) no-repeat; }
.overlap .show:hover    { background: rgba(255, 255, 255, 0.1) url(zoom.png) no-repeat; }
</style>

</HEAD>

<BODY>
<div class="overlap"><div class="innershadow"></div> <img alt="" src="googleimg.jpg" width="250px" height="160px"><div class="cover"></div> <a href="https://news.google.com/"><div class="link ">Google News</div></a><h5 class="itemtitle"><a href="https://www.google.co.in/maps/preview?hl=en&source=newuser-ws">Google Map</a><span class="itemcategories"><a rel="tag" href="https://images.google.com/">Search Google Image</a></span></h5></div>
</BODY>
</HTML>