I encrypted an MP4 video file FFMPEG. That gave me a playlist manifest file (namely stream.m3u8), a key file (namely stream.m3u8.key) and some .ts files. I used code below to play stream.m3u8 file and it worked
<code><head>
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.4.1/video.min.js"></script>
</head>
<body>
<video id="example-video" class="video-js vjs-default-skin" controls="controls" width="640" height="360">
<source src="./stream.m3u8" type="application/x-mpegURL" />
</video>
<script>
var player = videojs('example-video');
</script>
</body>
</code>
<code><head>
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.4.1/video.min.js"></script>
</head>
<body>
<video id="example-video" class="video-js vjs-default-skin" controls="controls" width="640" height="360">
<source src="./stream.m3u8" type="application/x-mpegURL" />
</video>
<script>
var player = videojs('example-video');
</script>
</body>
</code>
<head>
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.4.1/video.min.js"></script>
</head>
<body>
<video id="example-video" class="video-js vjs-default-skin" controls="controls" width="640" height="360">
<source src="./stream.m3u8" type="application/x-mpegURL" />
</video>
<script>
var player = videojs('example-video');
</script>
</body>
After I tried to use input and select file attributes and I tried code below
<code><html>
<head>
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.4.1/video.min.js"></script>
</head>
<body>
<label for="input">Choose a video file to process:</label>
<input type="file" id="input" name="input_video">
<p id="demo"><p/>
<video id="video" class="video-js vjs-default-skin" width="320" height="240" controls style="display: none;">
<source id="vid" type="application/x-mpegURL" />
</video>
</body>
<script>
document.getElementById("input").addEventListener("change", function() {
var media = URL.createObjectURL(this.files[0]);
var vid = document.getElementById("vid");
vid.src = media;
var video = document.getElementById("video");
video.style.display = "block";
video.play();
document.getElementById("demo").innerHTML = vid.src;
var player = videojs('video');
//player.play();
});
</script>
</html>
</code>
<code><html>
<head>
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.4.1/video.min.js"></script>
</head>
<body>
<label for="input">Choose a video file to process:</label>
<input type="file" id="input" name="input_video">
<p id="demo"><p/>
<video id="video" class="video-js vjs-default-skin" width="320" height="240" controls style="display: none;">
<source id="vid" type="application/x-mpegURL" />
</video>
</body>
<script>
document.getElementById("input").addEventListener("change", function() {
var media = URL.createObjectURL(this.files[0]);
var vid = document.getElementById("vid");
vid.src = media;
var video = document.getElementById("video");
video.style.display = "block";
video.play();
document.getElementById("demo").innerHTML = vid.src;
var player = videojs('video');
//player.play();
});
</script>
</html>
</code>
<html>
<head>
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.4.1/video.min.js"></script>
</head>
<body>
<label for="input">Choose a video file to process:</label>
<input type="file" id="input" name="input_video">
<p id="demo"><p/>
<video id="video" class="video-js vjs-default-skin" width="320" height="240" controls style="display: none;">
<source id="vid" type="application/x-mpegURL" />
</video>
</body>
<script>
document.getElementById("input").addEventListener("change", function() {
var media = URL.createObjectURL(this.files[0]);
var vid = document.getElementById("vid");
vid.src = media;
var video = document.getElementById("video");
video.style.display = "block";
video.play();
document.getElementById("demo").innerHTML = vid.src;
var player = videojs('video');
//player.play();
});
</script>
</html>
The code above can read stream.m3u8 playlist file but can not read “key file” because the location of key file is define in stream.m3u8 itself.
When I browse the stream.m3u8 file and try to play, the play window shows the duration (by seconds) but tries and tries and tries to play but can not play. This shows that it can not recall key file.
I believe that if I define key file location out of manifest file, for example inside JavaScript code this problem will be solved.
HOW CAN I DEFINE KEY FILE LOCATION OUT OF PLAYLIST FILE?
You can define the key in JavaScript.
Since you are using Video.js, you have to define that via Video.js. As far as I know, there isn’t any option for that in Video.js API.
Video.js uses http-streaming, and the process of parsing m3u8 done in it. Therefore you’re able to handle that in this library.
Helpful links:
- package.json
- decrypts the media-segment if it has a key uri and an iv
- m3u8-parser
2