How to Play dual audio MKV/AVI video with HTML5 ?
Â
From what I searched for, Chrome has the codecs to play MKV videos. But, so far, I haven’t found anything that allows, using Javascript / HTML5, to select the audio tracks available in the MKV and AVI files.
Can anyone give me a light on how to do this?
My idea was to create a web player to play this type of file, with the possibility to select the audio track and display subtitles.
Playing dual audio MKV/AVI videos with HTML5 directly is not straightforward due to limited native support for such formats in modern browsers. However, you can use a combination of HTML5 video, JavaScript, and external libraries to achieve this functionality. One such approach is to use the ffmpeg.wasm library to decode the video, extract audio and subtitle tracks, and then use the Media Source Extensions (MSE) API to play the video with selectable audio tracks. Note that this approach may require some backend processing and may not work in all browsers.
Here’s an outline of the steps you can follow:
-
Convert Video and Extract Tracks:
- Convert the MKV/AVI video to a format that is more widely supported by HTML5 video, such as MP4 (H.264 video codec, AAC audio codec).
- Use
ffmpegto extract the different audio tracks and subtitles from the video. You can do this on the server-side using theffmpegcommand-line tool or useffmpeg.wasmin your frontend.
-
Setup HTML5 Video Element:
- Create an HTML5 video element on your webpage.
- Use the
Media Source Extensions (MSE)API to handle media streaming and track selection. MSE allows you to feed media data to the video element manually.
-
Implement JavaScript Controls:
- Use JavaScript to load and play the video segments for different audio tracks based on user selection.
- Provide a way for users to switch between audio tracks and subtitles using buttons or a dropdown menu.
Please note that this approach requires a significant amount of work and expertise in multimedia handling and video processing. Here’s a simple example using ffmpeg.wasm (compiled with Emscripten) and JavaScript to extract and play dual audio tracks:
<!DOCTYPE html>
<html>
<head>
<title>Dual Audio Video Player</title>
</head>
<body>
<video id="videoPlayer" controls></video>
<select id="audioTrackSelect">
<option value="0">Audio Track 1</option>
<option value="1">Audio Track 2</option>
</select><script src="ffmpeg-core.js"></script>
<script>
const videoPlayer = document.getElementById('videoPlayer');
const audioTrackSelect = document.getElementById('audioTrackSelect');
const ffmpeg = createFFmpeg({ log: true });async function loadFFmpeg() {
await ffmpeg.load();
}async function playVideo(audioTrackIndex) {
const videoUrl = 'path_to_converted_video.mp4'; // Provide the URL of your converted video here
const audioUrl = `path_to_extracted_audio_${audioTrackIndex}.aac`; // Provide the URL of the extracted audio hereconst mediaSource = new MediaSource();
videoPlayer.src = URL.createObjectURL(mediaSource);
await mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');const audioSourceBuffer = mediaSource.addSourceBuffer('audio/mp4; codecs="mp4a.40.2"');
const audioResponse = await fetch(audioUrl);
const audioData = await audioResponse.arrayBuffer();
audioSourceBuffer.appendBuffer(audioData);videoPlayer.play();
}audioTrackSelect.addEventListener('change', () => {
const selectedAudioTrackIndex = parseInt(audioTrackSelect.value);
playVideo(selectedAudioTrackIndex);
});loadFFmpeg();
</script>
</body>
</html>
In this example, you would need to replace path_to_converted_video.mp4 and path_to_extracted_audio_${audioTrackIndex}.aac with the actual URLs of your converted video and extracted audio tracks, respectively.
Please keep in mind that this is a simplified example, and the actual implementation can be much more complex, especially when dealing with various browser quirks and file handling. Additionally, the conversion and extraction process should ideally be done on the server-side to reduce the workload on the client and ensure better performance.
