HTML DOM Video canPlayType( ) Method

HTML Web Development Front End Technology

The HTML DOM Video canPlayType() returns a string corresponding to whether the browser can play the specified video type or not.

Syntax

Following is the syntax −

Returning boolean value - true/false

videoObject.canPlayType(typeAsParameter)

Here, the return value can be the following −

returnValue	Details
probably	It defines that browser mostlikely supports the specified video type
maybe	It defines that browsermight support the specified video type, but playback will have tobe attempted to be sure
"" (empty string)	It defines that browserdefinitely doesn’t supports the specified video type

Let us see an example of Video canPlayType() property −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video canPlayType()</title>
<style>
   * {
      padding: 2px;
      margin:5px;
   }
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
   <form>
      <fieldset>
         <legend>HTML-DOM-Video-canPlayType( )</legend>
         <video id="demo" width="320" controls><source src="" type="video/mp4"></video><br>
         <input type="button" onclick="getTrackDetails()" value="Does Browser Supports video/mp4?">
         <div id="divDisplay">
         </div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var demo = document.getElementById("demo");
   var srcOfMedia = 'http://www.tutorialspoint.com/html5/foo.mp4';
   function getTrackDetails() {
      var ans = demo.canPlayType('video/mp4');
         if(ans !== ''){
            divDisplay.textContent = 'Browser supports mp4';
            demo.src = srcOfMedia;
            demo.load();
         }
         else
            divDisplay.textContent = 'Browser does not supports mp4';
   }
</script>
</body>
</html>