Play audio/video on web page in HTML5

HTML5 has come with great support of playing audio or video file in web page. Before HTML5, you require any plug-in support to play any audio or video.

Now such kind of plug-in are obsolete in new version browsers and it was the part of old browser.

In HTML5 you just have to embed <audio> or <video> element on you webpage to play audio or video file on webpage. This <audio> or <video> element is fully supported by any modern browser.

It is simple to embed in you HTML code.

Browser support for these elements are given below. This table shows the minimum number of version of browser from where these element are supported- means browser version if equals or higher than specified- it will support  <audio> or <video> elements.

For video:-

 For audio:-

Now how we use this element in HTML5 code:-

We just have to put this element at required location in our code.

<video width="320" height="240" controls>
  <source src="location of file/file.mp4" type="video/mp4">
  <source src="location of file/file.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

<audio controls>
  <source src="location of file/file.ogg" type="audio/ogg">
  <source src="location of file/file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

If you want play video or audio automatically on startup, put the controls autoplay in tag e.g.

<audio controls autoplay>

<video width="320" height="240" controls autoplay>

It looks on page like:-

Multi select Checkbox

We stuck at some situation where checkboxes are generated dynamically- generally when we fetch data from database- and we have to select  some row are all rows and do some operation on that.

If we don't have multi select checkbox option we will have to select one by one and if there are too many data it will be time-consuming and irritating.

To do this we require Jquery with javascript.

1. Add jquery.min.js to file-

<script src="js/jquery.min.js"></script>

2. Use javascript to file-

$(document).ready(function(){

    $('#select_all').on('click',function(){

        if(this.checked){

            $('.checkbox').each(function(){

                this.checked = true;

            });

        }else{

             $('.checkbox').each(function(){

                this.checked = false;

            });

        }

    });

    

    $('.checkbox').on('click',function(){

        if($('.checkbox:checked').length == $('.checkbox').length){

            $('#select_all').prop('checked',true);

        }else{

            $('#select_all').prop('checked',false);

        }

    });

});

3. Then create master checkbox-

<input type='checkbox' id='select_all' />

4. Now another checkboxes will be-

<input name='rid[]' type='checkbox' class='checkbox' value='<?php echo $row[0];?>' />

All done .

It looks like-

 

Customize Textbox, List/Menu, Button or Div border style

You can customize Textbox, List/Menu or Div using CSS.

All input can be rounded and with border color:

CSS:-

input{
border-radius: 8px;
border-color: #98bf21;
}

HTML:-

<input type="text" name="username" placeholder="Enter Password" required />

<input type="submit" name="Submit" value="Login" style="width:150px;"/>

 <select name="select2" id="select2">
          <option>Select Scheduled Month</option>
          <option>January</option>
          <option>February</option>
          <option>March</option>
          <option>April</option>
          <option>May</option>
          <option>June</option>
          <option>July</option>
          <option>August</option>
          <option>September</option>
          <option>October</option>
          <option>November</option>
          <option>December</option>
        </select>


Output:-