Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Use Parameters in HTML5 Video Tags/Attributes

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 4.02k
    Comment on it

    One Of the Most powerful elements of HTML5 is Video. The video element is used to embed the video in the HTML page.

    There is no need of any plugin or other markup, and the best thing is that it supports all the major browsers. You have to just type a single link element and that's it.

     

     

     

    Video element supported only three video formats like MP4, Ogg and WebM.

    Basic Syntax of Video Tag is:

    <video> ... </video>

     

    By this way Video Tag is implement:

     <video controls="controls" src="findnerd.mp4">
            Your browser does not support the HTML5 Video element.
        </video>
    

    A video, using the browser default set of controls, with alternative sources.

     

    Tag-Specific Attributes:

    <video controls="controls">
            <source src="shuttle.mp4" type="video/mp4">
            <source src="shuttle.ogv" type="video/ogg">
            Your browser does not support the HTML5 Video element.
        </video>

     

     

    Optional Attributes

    Below are the list of optional attributes you can use, if in case any browser do not support the video element/format then the text written between the Video tags will be displayed i.e <video> Sorry, your current browser does not support the video tag</video>

     

    1. Autoplay: Once the video load in browser it will play automatically.

    <video controls autoplay>
    		  <source src="movie.mp4" type="video/mp4">
    		  <source src="movie.ogg" type="video/ogg">
    		  Sorry, your current browser does not support the video tag.
    		</video> 

     

    2. Controls: Using this attribute, you will be able to show play pause and other settings button on the video player.

     <video controls>
    		  <source src="movie.mp4" type="video/mp4">
    		  <source src="movie.ogg" type="video/ogg">
    		  Upps! Seems your browser does not support the video tag.
    		</video> 

     

     

    3. Height: Using this attribute you can change the height & width of video.

    <video width="320" height="240" controls>
    		  <source src="movie.mp4" type="video/mp4">
    		  <source src="movie.ogg" type="video/ogg">
    		 Upps! Seems your browser does not support the video tag.
    		</video>

     

     

    4. loop: This attribute helps in playing next video in queue automatically

     <video controls loop>
    		  <source src="movie.mp4" type="video/mp4">
    		  <source src="movie.ogg" type="video/ogg">
    		  Upps! Your browser does not support the video tag.
    		</video> 

     

     

    5. Muted: Option to get mute button on video player

    <video controls muted>
    		  <source src="movie.mp4" type="video/mp4">
    		  <source src="movie.ogg" type="video/ogg">
    		  Upps! Your browser does not support the video tag.
    		</video> 

     

     

    6. Poster: This attribute will put a poster image on player when the video is not played and once user click on play icon the poster will disapper.

    <video controls poster="/images/w3html5.gif">
    		  <source src="movie.mp4" type="video/mp4">
    		  <source src="movie.ogg" type="video/ogg">
    		 Upps! Your browser does not support the video tag.
    		</video> 

     

    7. Preload: This attribute loads the video at the time page loads, video will stat playing directly once the user clicks on play icon instead of loading.

    <video controls preload="none">
    		  <source src="movie.mp4" type="video/mp4">
    		  <source src="movie.ogg" type="video/ogg">
    		  Upps! Your browser does not support the video tag.
    		</video>
    <video preload="auto|metadata|none"> 

     

     

    8. Src: Using this attribute you will be able to locate the video file location.

     <video src="movie.ogg" controls>
    	  Your browser does not support the video tag.
    	</video>  

    Full funcational in all browsers -  use <source> elements inside the <video> element.

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

     

     

    9. Width: Again this will helps in adjusting the width of video in video player

    <video width="320" height="240" controls>
    	  <source src="movie.mp4" type="video/mp4">
    	  <source src="movie.ogg" type="video/ogg">
    	  Seems your browser does not support the video tag.
    	</video> 
    <video width="pixels"> 

     

     

    How to Use Parameters in HTML5 Video Tags/Attributes

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: