Question

我是这个词的新手，我正在尝试为我的学生制作自己的视频播放网站，其中一些我找到了这个HTML5代码，

<!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>

这个代码运行得很好，它也可以运行我的MKV，Webm和MP4视频文件，MP4文件运行得很好，但是当我尝试播放MKV时，视频播放但没有音频也发现了另一个问题，FVL视频没有播放。请帮忙解决方案，代码来源：https://github.com/selz/plyr 请尽快帮助。谢谢。

Answer 1

HTML5 video tag目前支持mp4，ogg和webm文件。

MKV（Matroska）视频文件，我直到现在都不会遇到，是一种免费的开源多媒体文件格式。（几乎）不可能支持所有这些格式。我建议你将文件转换为更常见的格式或单独导入音频。

很多any mobile browser不支持Flv（Flash），而且仅在桌面上使用Adobe插件。 Adobe suggested that developers use html5 video instead of flash。因此，随着Flash迅速被弃用，我不会过分担心这一点。请注意，这些文件也可以转换。

Answer 2

您 - 作为网络服务的提供者 - 负责提供您的学生可以使用的格式。如果您有可能强制所有人使用相同的软件，那将是理想的并简化操作。在大多数情况下，这是不可能的，以及youtube或vimeo等服务转换许多不同容器和/或视频和音频格式甚至分辨率的视频的原因。您也应该计划这样做，因为这是目前的标准。

直到我有一个hacky解决方案：它会尝试使用默认的html5播放器播放任何内容，但如果失败则会加载一个Flash播放器并进一步尝试。它并不完美，但可能是目前最好的解决方案。请注意，使用mime-type video / webm时通常可以加载mkv。某些浏览器可能需要服务器发送此mime类型（如果apache在其中创建一个带有AddType video/webm .mkv的htaccess文件）。让您的脚本将所有http://example.com/output.mkv地址替换为您想要的同一个视频文件＆＃39;尝试＆＃39;：

<!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>

此解决方案使用http://flv-player.net/ 而且我认为通过你自己的方式托管播放器以节省带宽符合其作者的利益。您还应该根据许可证查阅文档，但 afaik 该播放器完全免费使用。

这些问题真的很烦人。祝你好运！

Mkv，flv和其他没有音频的视频文件

2 个答案: