HTML DOM Video canPlayType( ) Method

HTMLWeb DevelopmentFront End Technology

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

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>

Output

Before clicking ‘Does Browser Supports video/mp4?’ button −

After clicking ‘Does Browser Supports video/mp4’ button −

raja
Published on 30-Oct-2019 06:49:41
Advertisements