My Multi-DRM Video is Not Playing on Chrome/IE (DRM: KeySystem Access Denied! Error)
If you use Adilo multi-DRM, you probably encoutered this error:
> > DRM: KeySystem Access Denied! -- Key system access denied! Failed to execute 'requestMediaKeySystemAccess' on 'Navigator': requestMediaKeySystemAccess is disabled by feature policy.
Or something similar like the image below
Don't panic, it's not bug!
What has happened is that our player do not have permission to play your DRM protected video on Chrome/IE (or chromium browsers) due to CORs policy error.
Basically the cross-origin iframe embedding is blocked by Chrome and other major browsers except FireFox.
You can read more about it here (right click and open in new tab).
#1: For DRM video, you must use iFrame embed and not Javascript embed
The IFRAME embed code will look like this:
> > <iframe width="853" height="480" allowtransparency="true" src="https://adilo.bigcommand.com/watch/YOURVIDEO_ID" frameborder="0" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen scrolling="no" ""></iframe>_
#2: Then you must allow encrypted-media to play on your embed by simply adding this code to the Iframe embed code: src="https://yourdomain.com" allow="encrypted-media *"
Here's how your new Iframe embed code will look like:
> > <iframe width="853" height="480" allowtransparency="true" src="https://adilo.bigcommand.com/watch/YOURVIDEO_ID"_ allow="encrypted-media *" frameborder="0" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen scrolling="no" ></iframe>
> > <div style="width: 100%; height: auto; padding-top: 56.25%; position: relative"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%" allowtransparency="true" src="https://adilo.bigcommand.com/watch/YOURVIDEO_ID" allow="encrypted-media *" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" oallowfullscreen="" msallowfullscreen="" scrolling="no" frameborder="0" ></iframe></div>_
And that's it... you're off to rocking the world!
Important Notes:
i) To grant access to all origins that might be loaded in the iframe, the syntax can be used. This should be used carefully as it means that any page that gets loaded in the iframe can request encrypted-media, which is often not the intent (you can also remove the )
ii) Always make sure your domain has SSL (https) to avoid errors.
Choose files or drag and drop files
> > DRM: KeySystem Access Denied! -- Key system access denied! Failed to execute 'requestMediaKeySystemAccess' on 'Navigator': requestMediaKeySystemAccess is disabled by feature policy.
Or something similar like the image below
Don't panic, it's not bug!
What has happened is that our player do not have permission to play your DRM protected video on Chrome/IE (or chromium browsers) due to CORs policy error.
Basically the cross-origin iframe embedding is blocked by Chrome and other major browsers except FireFox.
You can read more about it here (right click and open in new tab).
**Simple Solution**
#1: For DRM video, you must use iFrame embed and not Javascript embed
The IFRAME embed code will look like this:
> > <iframe width="853" height="480" allowtransparency="true" src="https://adilo.bigcommand.com/watch/YOURVIDEO_ID" frameborder="0" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen scrolling="no" ""></iframe>_
#2: Then you must allow encrypted-media to play on your embed by simply adding this code to the Iframe embed code: src="https://yourdomain.com" allow="encrypted-media *"
Here's how your new Iframe embed code will look like:
REGULAR IFRAME EMBED FOR DRM
> > <iframe width="853" height="480" allowtransparency="true" src="https://adilo.bigcommand.com/watch/YOURVIDEO_ID"_ allow="encrypted-media *" frameborder="0" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen scrolling="no" ></iframe>
**RESPONSIVE IFRAME EMBED FOR DRM**
> > <div style="width: 100%; height: auto; padding-top: 56.25%; position: relative"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%" allowtransparency="true" src="https://adilo.bigcommand.com/watch/YOURVIDEO_ID" allow="encrypted-media *" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" oallowfullscreen="" msallowfullscreen="" scrolling="no" frameborder="0" ></iframe></div>_
And that's it... you're off to rocking the world!
Important Notes:
i) To grant access to all origins that might be loaded in the iframe, the syntax can be used. This should be used carefully as it means that any page that gets loaded in the iframe can request encrypted-media, which is often not the intent (you can also remove the )
ii) Always make sure your domain has SSL (https) to avoid errors.
Choose files or drag and drop files
Updated on: 15/08/2021
Thank you!