how to play HLS aes encrypted video? #5065

JangJuMyeong · 2021-07-19T09:32:30Z

JangJuMyeong
Jul 19, 2021

What do you want to do with Hls.js?

I want to play this file
https://beecastmediastaging-koct1.streaming.media.azure.net/2cdb5c11-1a01-4a63-a6f4-43f4bd17f0e3/TestMV.ism/manifest(format=m3u8-aapl,encryption=cbc).m3u8

Token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cm46bWljcm9zb2Z0OmF6dXJlOm1lZGlhc2VydmljZXM6Y29udGVudGtleWlkZW50aWZpZXIiOiJhNDY2Njg0MS1mYjcyLTRmY2UtYmFkNy1hZTViZmMxNDc1OTUiLCJuYmYiOjE2MjY2NjE3NDksImV4cCI6MTYyNjY4MDA0OSwiaXNzIjoibXlJc3N1ZXIiLCJhdWQiOiJteUF1ZGllbmNlIn0.vkOiY0NuwClVl-tXUyw9Zbr7pgHzR22z6C855UU-9cw

What have you tried so far?

this is my code

<!DOCTYPE html>
    <html>
     <head>
        <meta charset=utf-8 />
        <title>hls.js</title>
		<script src="//cdn.jsdelivr.net/npm/hls.js@latest"></script>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    </head>
    <body>
		
		<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
		
        <video controls autoplay id="video-player" height="700" width="1000"></video>
        <script>

		var levels = [];
        	var video = document.getElementById('video-player');
		var videoEnoryptSrc = "https://beecastmediastaging-koct1.streaming.media.azure.net/2cdb5c11-1a01-4a63-a6f4-43f4bd17f0e3/TestMV.ism/manifest(format=m3u8-aapl,encryption=cbc).m3u8"
		var key = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cm46bWljcm9zb2Z0OmF6dXJlOm1lZGlhc2VydmljZXM6Y29udGVudGtleWlkZW50aWZpZXIiOiJhNDY2Njg0MS1mYjcyLTRmY2UtYmFkNy1hZTViZmMxNDc1OTUiLCJuYmYiOjE2MjY2NjE3NDksImV4cCI6MTYyNjY4MDA0OSwiaXNzIjoibXlJc3N1ZXIiLCJhdWQiOiJteUF1ZGllbmNlIn0.vkOiY0NuwClVl-tXUyw9Zbr7pgHzR22z6C855UU-9cw"
		var config = {
				capLevelToPlayerSize: true,
			}

	        if (video.canPlayType("application/x-mpegURL")) {
				var hls = new Hls(config)
				hls.loadSource(videoSrc)
				hls.attachMedia(video)

	        } else if (Hls.isSupported()) {
	        	var hls = new Hls(config);
		        hls.loadSource(videoEnoryptSrc+"?token="+key);
		        hls.attachMedia(video);
				var i = 0;
				hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
				console.log(
				'manifest loaded, found ' + data.levels.length + ' quality level'
				);
				levels = data.levels;
				while (i<levels.length)
				{	
					console.log(levels[i]);
					console.log(levels[i].attrs.RESOLUTION);
					i++;
				}
				});	
	        }
</script>
</body>
</html>

I get the following error "The access token is not found in request header"

what can I do.....? help me.

itsjamie · 2022-11-27T23:29:28Z

itsjamie
Nov 27, 2022
Maintainer

I'd recommend taking a look at: https://github.com/Azure-Samples/media-services-3rdparty-player-samples/blob/master/src/hls.js/index.js

They provide a sample for playing with the Azure Media Services stack here if this is still an issue for you.

It looks like the JWT you provided should be provided as a request header on the Authorization HTTP header.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

how to play HLS aes encrypted video? #5065

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

how to play HLS aes encrypted video? #5065

Uh oh!

Uh oh!

JangJuMyeong Jul 19, 2021

What do you want to do with Hls.js?

What have you tried so far?

Replies: 1 comment

Uh oh!

itsjamie Nov 27, 2022 Maintainer

JangJuMyeong
Jul 19, 2021

itsjamie
Nov 27, 2022
Maintainer