Skip to main content

video tag

HTML <video> Tag:

Description:

The HTML <video> tag is used to embed video into your web page, it has several video sources.
<!DOCTYPE html>
<html>
<body>

<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>

<p><strong>Note:</strong> The video tag is not supported in Internet Explorer 8 and earlier versions.</p>

</body>
</html>






How to Llink   youtube    video   tag :

<html>
<head>
<title> iframe tage youtube video example</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/dUTmP3N1_AY" frameborder="0" allowfullscreen></iframe>
</body>
</html>








HTML <video> autoplay Attribute:


<!DOCTYPE html>
<html>
<body>

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

<p><strong>Note:</strong> The video tag is not supported in Internet Explorer 8 and earlier versions.</p>

</body>
</html>





HTML <video> controls   Attribute:


<!DOCTYPE  html>
<html>
<body>

<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>

<p><strong>Note:</strong> The video tag is not supported in Internet Explorer 8 and earlier versions.</p>

</body>
</html>
The controls attribute is a boolean attribute.
When present, it specifies that video controls should be displayed.
Video controls should include:
  • Play
  • Pause
  • Seeking
  • Volume
  • Fullscreen toggle
  • Captions/Subtitles (when available)
  • Track (when available)

HTML <video> height Attribute


Example

A video player with a specified height and width:
<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>

HTML <video> loop Attribute

Example

A video that will start over again, every time it is finished:
<video controls loop>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
The loop attribute is a boolean attribute.
When present, it specifies that the video will start over again, every time it is finished.

HTML <video> muted Attribute

Example

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

Definition and Usage

The muted attribute is a boolean attribute.
When present, it specifies that the audio output of the video should be muted.

HTML <video> poster Attribute

Example

A video player with a poster image:
<video controls poster="/images/w3html5.gif">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Definition and Usage

The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.

HTML <video> preload Attribute

Example

Author thinks that the video should NOT be loaded when the page loads:
<video controls preload="none">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Definition and Usage

The preload attribute specifies if and how the author thinks that the video should be loaded when the page loads.
The preload attribute allows the author to provide a hint to the browser about what he/she thinks will lead to the best user experience. This attribute may be ignored in some instances.
Note: The preload attribute is ignored if autoplay is present.

HTML <video> src Attribute

Example

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

Definition and Usage

The src attribute specifies the location (URL) of the video file.
The example above uses an Ogg file, and will work in Firefox, Opera and Chrome.
To play the video in Internet Explorer and Safari, we must use an MPEG4 file.
To make it work in all browsers - use <source> elements inside the <video> element. <source> elements can link to different video files. The browser will use the first recognized format:

Example

<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>


Comments

  1. Garima Ahuja23 October 2017 at 02:36

    is it use in wordpress panel as well ?
    for
    https://sisgain.com/hire-iphone-developer

    ReplyDelete

Post a Comment

Popular posts from this blog

How to handle XML with PHP

What is XML? The  eXtensible Markup Language  is a way to structure your data for sharing across sites. Some of the technologies that are crucial to the web like  RSS  (Real Simple Syndication) and  Podcasts  are special flavors of XML. The beautiful thing about XML is that you can easily roll your own for anything you need. XML is easy to create because it’s a lot like HTML…except you can make up your own tags. Let’s say, for example that you’re putting together a feed for a list of songs playing at your own radio station. We’ll keep this simple, so we’ll just encode the name of the artist, the title of the song, plus the time when the song was played. We make up a couple of tags called  <title>  and  <artist>  and wrap each of them around a  <song>  tag. We’ll create a dateplayed attribute for each song with the date and time the song was played. You might encode something like that in this manner. ...
5 comments
Read more

XSLT QUICK GUIDE

E X tensible  S tylesheet  L anguage  T ransformation commonly known as XSLT is a way to transform the XML document into other formats such as XHTML. XSL Before learning XSLT, we should first understand XSL which stands for E X tensible  S tylesheet  L anguage. It is similar to XML as CSS is to HTML. Need for XSL In case of HTML document, tags are predefined such as table, div, and span; and the browser knows how to add style to them and display those using CSS styles. But in case of XML documents, tags are not predefined. In order to understand and style an XML document, World Wide Web Consortium (W3C) developed XSL which can act as XML based Stylesheet Language. An XSL document specifies how a browser should render an XML document. Following are the main parts of XSL − ·          XSLT  − used to transform XML document into various other types of document. ·       ...
8 comments
Read more

Jquery Sliding

jQuery Sliding Methods:-  With jQuery you can create a sliding effect on elements. jQuery has the following slide methods: slideDown() slideUp() slideToggle() (1)slideDown()  example:- <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("#flip").click(function(){     $("#panel").slideDown("slow");   }); }); </script> <style> #panel, #flip {   padding: 5px;   text-align: center;   background-color: #e5eecc;   border: solid 1px #c3c3c3; } #panel {   padding: 50px;   display: none; } </style> </head> <body> <div id="flip">Click to slide down panel</div> <div id="panel">Hello world!</div> </body> </html> (2)sldeUP()  example:- <html> <head> <script src="https://ajax....
11 comments
Read more