首页 > 解决方案 > Video js 无法在 Apache 和 Linux 中播放我的 m3u8 视频文件

问题描述

我的本地 MVC 应用程序(网站)有问题,我正在使用 Lubuntu 18.04 以及 apache 和 PHP。我有用于 HTTP Live Streaming 的 m3u8 文件。这是我的.htaccess文件:

Header set Access-Control-Allow-Origin "*"
AddType application/x-mpegURL .m3u8
AddType video/MP2T .ts
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !\.(mp3|php|css|js|png|jpg|jpeg|gif|ttf|woff|woff2|eot|mp4|webm|txt|m3u8|ts|M3U8|TS|manifest)$
    RewriteCond %{REQUEST_URI} !-f
    RewriteCond %{REQUEST_URI} !-d
    #RewriteCond %{REQUEST_URI} !-l
    RewriteRule ^(.*)$ index.php?url=$1 [QSA,L]
</IfModule>
# BEGIN GZIP
<ifmodule mod_deflate.c>
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE  image/jpeg
  AddOutputFilterByType DEFLATE  image/jpg
  AddOutputFilterByType DEFLATE  image/png
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
</ifmodule>
# END GZIP

这是我的视频 js hls 播放器的 php 文件:

...
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
  <script src="https://unpkg.com/video.js/dist/video.js"></script>
  <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
      <script type="text/javascript">
        var player = videojs('my-video');
        player.src({
          src: "<? echo $this->url('').'src/app/views/courses/0f5f49dd1829099d48105b3fee7c150e/video3.m3u8'; ?>",
          type: 'application/x-mpegURL'
        });
        player.play();
</script>
...

这是我在 Firefox 74 中的控制台: 在此处输入图像描述

m3u8 文件在页面中加载: 在此处输入图像描述

我希望有人有解决方案,谢谢。

标签: apacheubuntuhttp-live-streamingvideo.jsm3u8

解决方案


推荐阅读