Login/Register
How to playback MKV video in web browser?
Asked Answered
htmlaudiovideovlcmkv
G

7

49

I am trying to make a MKV video with a MPEG4 video codec and AC3 audio codec available to be played online using Mozilla or Chrome. I have tried multiple methods including native HTML5, which plays back the video but no audio and from what I've read AC3 is a proprietary codec so it is not included in the supported codecs. The code for that was as follows:

<video width='1024' height='768' controls autoplay> 
    <source src="path_to_src" type='video/x-matroska'>
</video>

I then tried to use the VLC web plugin (as I know VLC can play the files correctly) but have not yet gotten it to play any file, there doesn't seem to be a lot of consistency in the examples for using this method. Here is what I have tried so far using the VLC plugin:

<embed type="application/x-vlc-plugin" version="VideoLAN.VLCPlugin.2" 
width="1024" height="768" id="vlc" autoplay="yes" target="path_to_file"></embed>

The VLC page here says to add this:

<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
 codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab">

But the codebase doesn't seem to exist anymore and adding that classid to the code above has no effect on the playing of the file. Both methods result in the VLC player box being made but nothing ever getting played and the developer console doesn't show any errors.

So my question is does anyone know a workaround to get AC3 audio to play in the native HTML5 player or what the correct syntax is for the VLC web plugin? Or does anyone have a different player altogether they would recommend? Any and all help appreciated!

Gaius answered 17/1, 2014 at 17:59 Comment(2)
mkv isn't a supported format for HTML5 video. you will need to transcode/transmux to a format (or formats) supported by the browsers you need to deliver to – Crackleware
I found it easier to convert videos to .swf using ffmpeg and use it for streaming. – Saks
R
35

HTML5 does not support .mkv / Matroska files but you can use this code...

<video>
    <source src="video.mkv" type="video/mp4">
</video>

But it depends on the browser as to whether it will play or not. This method is known to work with Chrome.

Recommendation answered 11/9, 2015 at 7:18 Comment(5)
This did not work while testing in firefox. I just converted the mkv file to webm. – Farsighted
Works fine on Android and LG TV for view movies from pc serving the video storage using you html :) – Flinty
It doesn't work for me, unfortunately! Chrome only displays a black video without any playback controls. – Everard
Ok, to add the playback controls you have to add them manually to the video tag! Like so: <video controls></video>. But then there is still no audio. Does anyone know how to add the audio? – Everard
It's worked for me in the Chrome browser version: Version 94.0.4606.81 (Official Build) (x86_64) Here is the video tag: <video controls> <source src="video_file_path.mkv" type="video/mp4"> Your browser does not support the video tag. </video> – Sile
B
17

You can use this following code. work just on chrome browser. 

 function failed(e) {
   // video playback failed - show a message saying why
   switch (e.target.error.code) {
     case e.target.error.MEDIA_ERR_ABORTED:
       alert('You aborted the video playback.');
       break;
     case e.target.error.MEDIA_ERR_NETWORK:
       alert('A network error caused the video download to fail part-way.');
       break;
     case e.target.error.MEDIA_ERR_DECODE:
       alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
       break;
     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
       alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
       break;
     default:
       alert('An unknown error occurred.');
       break;
   }
 }
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
 <meta name="author" content="Amin Developer!" />

 <title>Untitled 1</title>
</head>
<body>

<p><video src="http://jell.yfish.us/media/Jellyfish-3-Mbps.mkv" type='video/x-matroska; codecs="theora, vorbis"' autoplay controls onerror="failed(event)" ></video></p>
<p><a href="YOU mkv FILE LINK GOES HERE TO DOWNLOAD">Download the video file</a>.</p>

</body>
</html>
Beersheba answered 3/12, 2015 at 14:35 Comment(2)
This works but I get no sound. Do I have to specify the audio codec as well? – Circumstantial
Sound track encoded with AC3 audio codec can't be played in Chrome due to licensing restrictions, so basically this method doesn't work for .mkv files playback – Grudge
T
12

To use video extensions that are MKV. You should use video, not source

For example :

  <!-- mkv -->
  <video width="320" height="240" controls src="assets/animation.mkv"></video>
<!-- mp4 -->
  <video width="320" height="240" controls>
    <source src="assets/animation.mp4" type="video/mp4" />
  </video>
My answer may be incomprehensible to you, so if you do not understand, click on this
Townsend answered 19/9, 2020 at 13:57 Comment(3)
Thanks, this really works – Georgie
I first thought it works but then I noticed that there is no audio. Is there maybe a way to enable the audio? – Everard
Not work with Firefox 93.0 x64 – Deaden
G
5

HTML5 and the VLC web plugin were a no go for me but I was able to get this work using the following setup:

DivX Web Player (NPAPI browsers only)

AC3 Audio Decoder

And here is the HTML:

<embed id="divxplayer" type="video/divx" width="1024" height="768" 
src ="path_to_file" autoPlay=\"true\" 
pluginspage=\"http://go.divx.com/plugin/download/\"></embed>

The DivX player seems to allow for a much wider array of video and audio options than the native HTML5, so far I am very impressed by it.

Gaius answered 18/1, 2014 at 4:4 Comment(2)
Damn, is there a way to do this without plugins? – Jaysonjaywalk
Unfortunately not until Chrome/Firefox/etc start supporting MKV video natively, at least no way I could find – Gaius
C
4
<video controls width=800 autoplay>
    <source src="file path here">
</video>

This will display the video (.mkv) using Google Chrome browser only.

Cinematograph answered 7/2, 2018 at 1:32 Comment(2)
I have tried it for .mkv but couldn't get audio in chrome. Are you sure that it works for chrome? – Lowermost
Same here , not working – Mcclurg
S
3

There's a JavaScript project for that at https://github.com/ilian/mkv-web

Modern web browsers only support the WebM container format that is based on Matroska, but limited to royalty-free codecs. Even when the MKV file contains media encoded by a codec that the browser is able to decode, most browsers are unable to play media in such a container. This project copies the underlying media streams to containers that are supported by most browsers (e.g. mp4, webm) inside the browser without third-party extensions or programs. This is achieved by remuxing media segments with ffmpeg compiled to webassembly (thanks to the ffmpeg.wasm project) using web workers. Remuxed chunks are sent from the Web Worker to the main thread and appended to the HTML5 video element using Media Source Extensions.

Spavined answered 7/3, 2023 at 9:49 Comment(0)
Y
1

ArtPlayer is a very proficent player than can play mkv too with lots of options.

https://github.com/zhw2590582/ArtPlayer

Yeager answered 29/3 at 11:9 Comment(1)
It can play everything that your browser can play. Google Chrome (on Windows) can successfully play .mkv files with video stream encoded with h.264 and h.265 codecs. Firefox (on Windows) cannot. In order to force video playback in any browser, video re-encoding is required (e.g. with ffmpeg.wasm). – Cariotta

© 2022 - 2024 — McMap. All rights reserved.