CODEWITHSUNDEEP
javaphpjqueryhtmlvideo
Softbazz
Softbazz

Reputation: 202

Mkv, flv and others video files playing without audio

I am new in this word, I am trying to make my own video playing website for my students, some where I found this HTML5 codes,

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My Video Site</title>


        <!-- Styles -->
        <link rel="stylesheet" href="../dist/plyr.css">

        <!-- Docs styles -->
        <link rel="stylesheet" href="dist/demo.css">
    </head>
    <body>
        <header>
        </header>

        <main role="main" id="main">

            <section>
                <video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg" controls crossorigin>
                    <!-- Video files -->
                    <source src="http://localhost/video_project/The%20Angry%20Birds%20Movie%202016.mkv" type="video/mp4">


                    <!-- Text track file -->
                    <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>

                    <!-- Fallback for browsers that don't support the <video> element -->
                    <a href="http://localhost/video_project/The%20Angry%20Birds%20Movie%202016.mkv" download>Download</a>
                </video>


            </section>
        </main>

        <!-- Plyr core script -->
        <script src="../dist/plyr.js"></script>

        <!-- Docs script -->
        <script src="dist/demo.js"></script>

        <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
        <script src="https://cdn.rangetouch.com/0.0.9/rangetouch.js" async></script>

        <!-- Sharing libary (https://shr.one) -->
        <script src="https://cdn.shr.one/0.1.9/shr.js"></script>
        <script>if(window.shr) { window.shr.setup({ count: { classname: 'btn__count' } }); }</script>
    </body>
</html>

this codes are works very well, It also can run my MKV, Webm and MP4 videos files, MP4 files are working very well, But when I am trying to play MKV, video is play but without audio and also found another problem, FVL video not playing. Please help with solutions, Codes found source: https://github.com/selz/plyr Please help help as soon as possible. Thank you.

Upvotes: 0

Views: 1603

Answers (2)

entwicklerseite
entwicklerseite

Reputation: 416

You -as being the provider of a web service- are responsible for delivering a format, which your students can make use of. If you had the possibility to force all of them to use the same software, that would be ideal and simplify things. In most scenarios that is not possible and the reason why services like youtube or vimeo convert any video in many different container and/or video and audio formats and even resolutions. You should plan to do that as well, because that is currently the standard.

Untill then I have a hacky solution for you: It will try to play anything using the default html5 player, but if that fails it will load a flash player and further try. Its not perfect, but might be the best solution for now. Notice, that mkv can often be loaded when using the mime-type video/webm. Some browsers might require this mime type to be send by the server (in case of apache create a htaccess-file with AddType video/webm .mkv in it). Let your script replace any http://example.com/output.mkv address with one and the same video file you want to 'try':

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" id="html5player" controls>
  <source src="http://example.com/output.mkv" type="video/mp4" />
  <source src="http://example.com/output.mkv" type="video/webm" />
  <source src="http://example.com/output.mkv" type="video/flv" />
  Your browser does not support the video tag.
  <object type="application/x-shockwave-flash" data="http://flv-player.net/medias/player_flv.swf" width="320" height="240" id="flashplayer">
     <param name="movie" value="player_flv.swf" />
     <param name="FlashVars" value="flv=http://example.com/output.mkv&autoload=1&autoplay=1" />
  </object> 
</video>

<script>
  var player = document.getElementById("html5player");
  player.addEventListener('error', function() {
    player.parentNode.appendChild( document.getElementById("flashplayer") ); 
    player.parentNode.removeChild(player);
  }, true);
</script>

</body>
</html>

This solution uses http://flv-player.net/ and I think it would be in the interest of its author to host the player by yourown to save bandwidth. Also you should consult the documentation according to licensing, but afaik that player is completely free to use.

These kind of problems are really annoying. Good luck!

Upvotes: 0

Rachel Gallen
Rachel Gallen

Reputation: 28573

The HTML5 video tag currently supports mp4, ogg, and webm files.

MKV (Matroska) video files, which I'd never come across til just now are a free open-source multimedia file format. It would be (almost) impossible to support all such formats. I would suggest you convert the files into a more common format or import the audio separately.

Flv (Flash) is not supported on pretty much any mobile browser, and on desktop only with an Adobe plugin. Adobe suggested that developers use html5 video instead of flash. So with Flash becoming rapidly deprecated, I wouldn't worry too much about this one. Note that these files can also be converted.

Upvotes: 0

Related Questions