Integrating HTML5 EME video with edX platform: Why is "initDataType" empty?

Question

I have been trying to integrate HTML5 EME videos with edX video xblock

In that I am facing this error:

Failed to generate a license request DOMException: The initData parameter is empty.

             <script >
                'use strict';

    // Define a key: hardcoded in this example
    // This corresponds to the key used for encryption
var KEY = new Uint8Array([
        0xeb, 0xdd, 0x62, 0xf1, 0x68, 0x14, 0xd2, 0x7b,
        0x68, 0xef, 0x12, 0x2a, 0xfc, 0xe4, 0xae, 0x3c
    ]);

    var config = [{
        initDataTypes: ['webm'],
        videoCapabilities: [{
            contentType: 'video/webm; codecs="vp8"'
        }]
    }];

    var video = document.getElementById('v');
    video.addEventListener('encrypted', handleEncrypted, false);

    navigator.requestMediaKeySystemAccess('org.w3.clearkey', config).then(
        function(keySystemAccess) {
            return keySystemAccess.createMediaKeys();
        }
    ).then(
        function(createdMediaKeys) {
            return video.setMediaKeys(createdMediaKeys);
        }
    ).catch(
        function(error) {
            console.error('Failed to set up MediaKeys', error);
        }
    );

    function handleEncrypted(event) {
        console.log('encrypted event:', event);
        var session = video.mediaKeys.createSession();
        session.addEventListener('message', handleMessage, false);
        session.generateRequest(event.initDataType, event.initData).catch(
            function(error) {
                console.error('Failed to generate a license request', error);
            }
        );
    }

    function handleMessage(event) {
        console.log('message event: ', event);
       
        // If you had a license server, you would make an asynchronous XMLHttpRequest
        // with event.message as the body.  The response from the server, as a
        // Uint8Array, would then be passed to session.update().
        // Instead, we will generate the license synchronously on the client, using
        // the hard-coded KEY at the top.
        var license = generateLicense(event.message);
        console.log('license: ', license);

        var session = event.target;
        session.update(license).catch(
            function(error) {
                console.error('Failed to update the session', error);
            }
        );
    }

    // Convert Uint8Array into base64 using base64url alphabet, without padding.
    function toBase64(u8arr) {
        
        return btoa(String.fromCharCode.apply(null, u8arr)).
        replace(/\+/g, '-').replace(/\//g, '_').replace(/=*$/, '');
    }

    // This takes the place of a license server.
    // kids is an array of base64-encoded key IDs
    // keys is an array of base64-encoded keys
    function generateLicense(message) {
        // Parse the clearkey license request.
       var request = JSON.parse(new TextDecoder().decode(message));
        // We only know one key, so there should only be one key ID.
        // A real license server could easily serve multiple keys.
        console.assert(request.kids.length === 1);

        var keyObj = {
            kty: 'oct',
            alg: 'A128KW',
            kid: request.kids[0],
            k: toBase64(KEY)
        };
        return new TextEncoder().encode(JSON.stringify({
            keys: [keyObj]
        }));
    }
          </script>

<%page expression_filter="h"/>
<%! from django.utils.translation import ugettext as _ %>
<%inherit file="../main.html" />

<%block name="pagetitle">${_("About")}</%block>

<main id="main" aria-label="Content" tabindex="-1">
    <section class="container about">
        <h1>${_("About")}</h1>
        <p>${_("This page left intentionally blank. Feel free to add your own content.")}</p>
                  <video autoplay controls id='v'>
            <source src="http://simpl.info/eme/video/Chrome_44-enc_av.webm">
          </video>


    </section>
</main>

this is the function from where the error occurs.

The thing is when I do it simply without edX integration it works fine and there event.initDataType is "webm" whereas with edX integration it is empty. Can anyone please help ?