MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with Scalable Vector Graphics (SVG) in HTML5 Video Element

This tutorial is about the use of Scalable Vector Graphics and we gonna see multiple areas of working with SVG.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

The SVG language uses the XML language and it’s supported by all the major browsers. SVG can be used to define shapes, text and vectorial images and4to apply all kind of filters to these images. SVG got the programmers’ attention when HTML5 introduced the svg element and Internet Explorer 9 added support for it. SVG is written in XML, the markup language used by browsers to render vectorial shapes, text and images.

The XML file will contain drawing instructions for browser like point coordinates, text or shapes.

The major advantage of using SVG is that it produces vectorial graphics that can be scaled without losing precision and quality. The vectorial graphic is defined through geometric objects like points, lines, curves and shapes described by mathematic equations. The browser uses this geometric information to render the best quality graphic for the user’s screen resolution. A file that defines a vectorial graphic is smaller than a file that contains usual graphic because the XML file will retain only the mathematic equations used to render the graphic and no information about the actual pixels of the graphic.

It’s possible to apply masks and filters to a SVG graphic like in Photoshop or other specialized graphic application. The SVG XML definitions are usually kept in an external .svg file type and this file is included in the web page through the <object> or <embedded> tag. In HTML5 the SVG declarations can be included directly in the HTML file through the <svg> tag (inline SVG).

Content

The SVG text element defines a text as a graphic object. The next example uses the text element to display the message SVG Rocks! as graphic object:

Listing 1: Using the text element in SVG

<!DOCTYPE html>
<html>
<head>
 <meta charset=utf-8>
 <title>Using SVG text element</title>
</head>
<body>
 <svg>
  <text x="100" y="100" font-size="50" font-family="Georgia" fill="#cd0000" stroke="black" stroke-width="1">SVG Rocks!</text>
 </svg>
</body>
</html>

In the code above, x and y are the coordinates of the point where the text begins, font-size and font-family are the size and the name of the font (like in CSS), fill is the fill color, stroke and stroke-width are the contour color and the thickness of that contour. The result (in all the major browsers) is:

Displaying the SVG Example

Figure 1: Displaying the SVG Example

The SVG circle element defines a circle through four parameters: cx and cy are the coordinates of the center, r is the radius of the circle and fill is the fill color. The next example draws two concentric circles with different radius and fills color.

Listing 2: Drawing 2 concentric circles in SVG

<!DOCTYPE html>
<html>
<head>
 <meta charset=utf-8>
 <title>The  circle element</title>
</head>
<body>
 <svg height="200">
  <circle cx="100" cy="100" r="100" fill="#ed3c23" />
  <circle cx="100" cy="100" r="60" fill="#faf5b3" /></body>
</html>
Displaying 2 concentric circles

Figure 2: Displaying 2 concentric circles

The SVG ellipse element defines an ellipse and has four parameters: cx and cy are the coordinates of the center, rx and ry are the width and the height of the ellipse.

Listing 3: Drawing 2 ellipses in SVG

<!DOCTYPE html>
<html>
<head>
 <meta charset=utf-8>
 <title>The ellipse element</title>
</head>
<body>
 <svg height="200">
  <ellipse cx="100" cy="100" rx="100" ry="50" fill="#ed3c23" />
  <ellipse cx="170" cy="100" rx="100" ry="50" fill="#309bd7" />
 </svg>
</body>
</html>

Adding a text mask to a video element

In the next example we will apply to the video element a text mask so the video it will be visible only where is text. Mozilla Firefox is the only browser that accepts for now the SVG inline definitions for masks. For the other browsers we will write the mask definition in an external svg file.

For Firefox the inline definition of mask is presented below:

Listing 4: Inline definition mask for Firefox

<svg>
     <mask id="vmask">
         <text x="10" y="140" font-size="150" font-family="Verdana" font-weight="bold" fill="#fff">SVGMASK</text>
     </mask>
</svg>

For the other browsers, the external text.svg file is:

Listing 5: The text.svg external file for other browsers

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <mask>
   <text id="text" x="10" y="140" font-size="150" font-weight="bold" font-family="Verdana" fill="white">HELLO</text>
  </mask>
 </defs>
 <use xlink:href="#text"/>
</svg>

The mask is applied to the video element through the CSS property mask for Firefox, respectively -webkit-mask-box-image for the other browsers:

Listing 6: The CSS rule for mask

video {
    mask:url('#vmask'); /*Firefox only*/
    -webkit-mask-box-image:url('text.svg'); /*other browsers */
    margin:100px;
}

The HTML markup for the page is presented below:

Listing 7: The HTML file

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset=utf-8>
 <title>HTML video element with text mask</title>
 <style>
  video {
   mask:url('#vmask');  /*Firefox */
   -webkit-mask-box-image:url('text.svg'); /*Chrome, Safari */
   margin:100px;
  }
  text {
   text-anchor:left;
   letter-spacing:.1em;
  }
 </style>
</head>
<body>
 <video autoplay controls>
  <source src="video4.mp4" type="video/mp4">
  <source src="video4.webm" type="video/webm">
 </video>
<!-- Firefox Only -->
 <svg>
  <mask id="vmask">
   <text x="10" y="140" font-size="150" font-family="Verdana" font-weight="bold" fill="#fff">SVGMASK</text>
  </mask>
 </svg>
</body>
</html>

In Firefox, Chrome and Safari the page looks like:

SVG Mask Output

Figure 3: SVG Mask Output

In IE and Opera the page will contain only the implicit player because the mask won’t work.

Applying a gradient to the video element

The next example uses a mask formed by a rectangle that covers the entire video element and a circle applied over the rectangle. The rectangle shape is filled with a linear gradient from top to bottom.

The external mask.svg file is:

Listing 8: The external mask.svg file

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <mask id="c1" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
      <g id="group">
        <linearGradient id="grad" gradientUnits="objectBoundingBox" x2="0" y2="1">
          <stop stop-color="white" offset="0"/>
          <stop stop-color="white" stop-opacity="0" offset="1"/>
        </linearGradient>
        <circle id="circle" cx="240" cy="135" r="135" fill="white"/>
        <rect x="0" y="0" width="480" height="270" fill="url(#grad)"/>
      </g>
    </mask>
  </defs>
  <use xlink:href="#group"/>
</svg>

The HTML file is:

Listing 9: The HTML file

<!DOCTYPE html>
<html>
  <head>
    <title>SVG gradient </title>
    <style>
      .target {
        mask: url("mask.svg#c1");
        -webkit-mask: url("mask.svg");
      }
    </style>
  </head>
  <body>
    <video class="target" height="270" width="480" controls >
        <source src="video4.mp4"  type="video/mp4">
        <source src="video4.webm" type="video/webm">
        <source src="video4.ogg"  type="video/ogg">
    </video>
  </body>
</html>

The resulting page in Chrome, Safari and Firefox:

Output page in Chrome, Safari and Firefox

Figure 4: Output page in Chrome, Safari and Firefox

Another Exemple

The external file mask.svg contains the mask definition:

Listing 10: The external mask.svg file

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <mask id="c1" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
      <g id="group">
        <pattern id="pat" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
          <circle cx="6" cy="6" r="5" fill="white" stroke="white" />
        </pattern>
        <rect x="0" y="0" width="480" height="246" fill="url(#pat)"/>
        <circle id="circle" cx="240" cy="122" r="122" fill="white"/>
        <rect x="0" y="246" width="480" height="25" fill="white"/>
      </g>
    </mask>
  </defs>
  <use xlink:href="#group"/>
</svg>

Listing 11: The HTML file

<!DOCTYPE html>
<html>
  <head>
    <title> SVG Pattern </title>
    <style>
      .target {
        mask: url("mask.svg#c1");
        -webkit-mask: url("mask.svg");
      }
    </style>
  </head>
  <body>
    <video class="target" height="270" width="480" controls >
        <source src="video4.mp4"  type="video/mp4">
        <source src="video4.webm" type="video/webm">
        <source src="video4.ogg"  type="video/ogg">
    </video>
  </body>
</html>

Resulting page in Firefox, Chrome and Safari:

Output in different browsers

Figure 5: Output in different browsers

The SVG clipPath element

This SVG element can describe a path that the mask will use to clip the object to which it is applied. In the next example we’ll use the clipPath element to define a star shape mask.

Listing 12: The external mask.svg file

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
          "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                   xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="c1" maskUnits="userSpaceOnUse"
                      maskContentUnits="userSpaceOnUse">
      <polygon id="poly" fill="white"
               transform="translate(-180,-90) scale(1.2)" 
               points="350,75  379,161 469,161 397,215
                       423,301 350,250 277,301 303,215
                       231,161 321,161" />
    </clipPath>
  </defs>
  <use xlink:href="#poly"/>
</svg>

The star shape is defined through a polygon element. After the star shape mask is applied, the video controls are not visible anymore and to correct this, the HTML file contains inline SVG that define a Play/Pause visual control with variable opacity. The opacity of the control will increase on mouse:hover event.

The inline SVG definitions are:

Listing 13: The inline SVG definition for Play/Pause control

<svg height="270" width="480" xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink">
        <g class="svgbutton"> 
          <circle stroke="black" fill="transparent" fill-opacity="0" stroke-width="12" cx="240" cy="135" r="40"
                  onclick="togglevideo();"/> 
          <path class="play" fill="black" d="M 230 120 v 30 l 25 -15 Z"/> 
          <path class="pause" stroke-width="12" stroke="black" d="M 230 120 v 30 m 16 -30 v 30"/> 
        </g> 
</svg> 

In the listing above is defined a container g that holds a circle in which it will be drawn the play or pause symbol depending on the state of the video element. The two symbols are defined through two path elements which use the d attribute to describe how the symbols will be drawn. The d attribute has the following parameters:

  • M x y: the absolute coordinates of the starting drawing point. If M is replaced with m, the coordinates are relative.
  • v val: draws a vertical line from the current point (x,y) to the point (x, y+val). V means absolute coordinates and v relative coordinates.
  • h val: drows a horizontal line from the current point (x,y) to the point (x+val,y). H means absolute coordinates and h relative coordinates
  • L x y: drows a line from the current point to the point (x,y). L means absolute coordinates and l relative coordinates
  • Z: close the path by drawing a line from the current point to the start point

When the circle is pressed, the state of the video element and the symbol displayed must change. This functionality is achieved using the JavaScript code presented below:

Listing 14: The JavaScript code for changing the symbol and the video state

<script>
      var vid;
      window.onload = function() {
        vid = document.getElementsByTagName("video")[0];
        vid.addEventListener("ended", updateButton, true);
        vid.addEventListener("play", updateButton, true);
        updateButton();
      }
      function updateButton() {
        document.querySelector("#controls .play").style.display =
            isPlaying(vid) ? "none": "block";
        document.querySelector("#controls .pause").style.display =
            !isPlaying(vid) ? "none": "block";
      }
      function isPlaying(video) {
        return (!video.paused && !video.ended);
      }
      function togglevideo() {
        !isPlaying(vid) ? vid.play(): vid.pause();
        updateButton();
      }
    </script>

When the page is loaded, the event-handler called updateButton is attached to the video element for the ended and play events. The updateButton function uses the querySelector method to select the path element with play or pause changing the display mode of the correspondent symbol from none to block or inverse. This way, each symbol toggles between visible/invisible mode depending on the video player’s state. The toggleVideo function is called then the user clicks on the circle which holds the play/pause symbol. This function starts or pause the video element and calls the updateButton function to update the displayed symbol. The opacity of the displayed symbol is controlled through a CSS transition. The star shape mask is applied to the video element through CSS too.

Listing 15: The CSS rules

<style> 
      .svginside > * {
        position: absolute;
      }
      .svgbutton path {
        pointer-events: none;
      }
      /*this transition lasts 0.5s and changes the opacity from 0.3 to 0.7*/
      .svgbutton {
   transition-property: opacity;
   transition-duration: 0.5s;
        -moz-transition-property: opacity;
        -moz-transition-duration: 0.5s;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 0.5s;
        opacity: 0.3;
      }
      .svgbutton:hover {
        opacity: 0.7;
      }
      
      video {
        clip-path: url("mask.svg#c1"); /*Firefox*/
        -webkit-mask: url("mask.svg"); /*Chrome,Safari*/
      }
    </style> 

The next two images illustrate how the control symbol changes its shape and opacity:

Control symbol changing the shape and opacity of the image

Figure 6: Control symbol changing the shape and opacity of the image

Listing 16: The complete HTML file

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head> 
    <title>The SVG clipPath element</title> 
    <style> 
      .svginside > * {
        position: absolute;
      }
      .svgbutton path {
        pointer-events: none;
      }
     /*this transition lasts 0.5s and changes the opacity from 0.3 to 0.7*/
      .svgbutton {
        transition-property: opacity;
        transition-duration: 0.5s;
        -moz-transition-property: opacity;
        -moz-transition-duration: 0.5s;
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 0.5s;
        opacity: 0.3;
      }
      .svgbutton:hover {
        opacity: 0.7;
      }
      
      video {
        clip-path: url("mask.svg#c1"); /*Firefox*/
        -webkit-mask: url("mask.svg"); /*Chrome,Safari*/
      }
    </style> 
    <script>
       var vid;
      window.onload = function() {
        vid = document.getElementsByTagName("video")[0];
        vid.addEventListener("ended", updateButton, true);
        vid.addEventListener("play", updateButton, true);
        updateButton();
      }
      function updateButton() {
        document.querySelector("#controls .play").style.display =
            isPlaying(vid) ? "none": "block";
        document.querySelector("#controls .pause").style.display =
            !isPlaying(vid) ? "none": "block";
      }
      function isPlaying(video) {
        return (!video.paused && !video.ended);
      }
      function togglevideo() {
        !isPlaying(vid) ? vid.play(): vid.pause();
        updateButton();
      }
    </script>
  </head> 
  <body> 
    <h1>SVG mask created with the clipPath element</h1> 
    <div id="controls" class="svginside"> 
      <video class="target" height="270" width="480"> 
        <source src="video4.mp4"  type="video/mp4"/> 
        <source src="video4.webm" type="video/webm"/> 
        <source src="video4.ogg"  type="video/ogg"/> 
      </video> 
      <svg height="270" width="480" xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink">
        <g class="svgbutton"> 
          <circle stroke="black" fill="transparent" fill-opacity="0" stroke-width="12" cx="240" cy="135" r="40"
                  onclick="togglevideo();"/> 
          <path class="play" fill="black" d="M 230 120 v 30 l 25 -15 Z"/> 
          <path class="pause" stroke-width="12" stroke="black" d="M 230 120 v 30 m 16 -30 v 30"/> 
        </g> 
      </svg> 
    </div>    
  </body> 
</html>

Conclusion

Using SVG language we can create light weighted graphics that can be scaled without losing quality and precision and can be displayed by all the major browsers.



Have good knowledge on Java, HTML, CSS and Android platform and is pursuing Masters in Computer Applications.

What did you think of this post?

Did you like the post?

Help us to keep publishing good contents like this.

SUPPORT US

funded

remaining

[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login