<audio> 

To play an audio file in HTML, use the <audio>element:

Example

<audio controls>
  <source src="horse.ogg"type="audio/ogg">
  <source src="horse.mp3"type="audio/mpeg">
Your browser does not support the audio element.
</audio>
 How It Works
The controls attribute adds audio controls, like play, pause, and volume.
Text between the <audio> and </audio> tags will display in browsers that do not support the <audio> element.
Multiple <source> elements can link to different audio files. The browser will use the first recognized format.

Adding Videos in a Webpage


What's cooler than a photo? A video! The HTML video element can add video to a webpage.Let's take a look at them:

Example:<video width="320" height="240" controls>
<source src="video-url.mp4" type="video/mp4"></video>
TAP THE PLAY BUTTON.



The video element uses a number of attributes. Let's take a look at them:
width and height: Set the size of the screen that displays the video.

controls: Adds play, pause and volume control.

source src: Sets the URL of the video to play.
type: Specifies different video formats.
This Our Result is.

Adding Side Menu Using JAVA

So friends today I am going to tell you people about how to add icon menu based on Java and Jquery. First of all develop a html page consisting of:


<body>

    <div class="menu">
     
      <!-- Menu icon -->
      <div class="icon-close">
        <img src="Any image" />
      </div>
<!-- Menu -->
      <ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Main body -->
    <div class="jumbotron">

      <div class="icon-menu">
        <i class="fa fa-bars"></i>
        Menu
      </div>
</div>
</body></div>

Now you need to add two java files in body,by using script tag<script src="
"></script>,use two tags for two files.
These are,one is that you willl develop other one is the jquery whick makes java programming easier.
jquery link-http://code.jquery.com/jquery-2.2.2.min.js

Other one is

var main=function(){
    $('.icon-menu').click(function()
    {
   $('.menu').animate({
     left: '0px'},200);
     $('body').animate({
         left:'285px'
     },200);
    
    });
      $('.icon-close').click(function()
    {
        $('.menu').animate({
            left:'-285px'
        },200);
        $('body').animate({
            left:'0px'},200);
    });
  
};


$(document).ready(main);

You need to save this file as app.js

Also you need to add a CSS file:

/* Initial body */
body {
  left: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}

/* Initial menu */
.menu {
  background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
  left: -285px;  /* start off behind the scenes */
  height: 100%;
  position: fixed;
  width: 285px;
}

/* Basic styling */

.jumbotron {
  background-image: url('any image'); 
  height: 100%;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;
}

.icon-menu {
  color: #fff;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-top: 25px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-menu i {
  margin-right: 5px;

}
Here is our java programming complete.


Subscribe to: Comments (Atom)