当前位置: 首页 > 知识库问答 >
问题:

使用nginx和video,js在http直播中假设质量选择器时出现问题

柳星晖
2023-03-14

我最近开始使用nginx和video.js来建立一个直播流。问题:如果我使用Videojs-contrib-质量-水平和Videojs-hls-质量-选择器作为video.js的插件,他们应该会根据下载的带有hls变体的播放列表自动插入一个质量选择器。但事实并非如此,它只是在激活自动选项的情况下添加质量菜单。为什么HLS播放列表或播放器无法访问变体并呈现正确的菜单?

版本:

视频js:7.6.6

视频质量级别

videojs hls质量选择器:1.1.1

以下是我插入并启动播放器的代码:

this.videoJSplayer = videojs('video_player', {
      html5: {
        hls: {
          overrideNative:true,
          //withCredentials: true
       },
      controls: false,
      autoplay: false,
      preload: 'auto'
     }
this.videoJSplayer.src([{type:'application/x-mpegURL',src: URL + ".m3u8"}]);
      this.videoJSplayer.controls('true');
      this.videoJSplayer.play();
      this.isButtonVisible = false;
      this.videoJSplayer.hlsQualitySelector();

这是我的播放列表的样子:

#EXT-X-STREAM-INF:PROGRAM-ID=1,CLOSED-CAPTIONS=NONE,BANDWIDTH=288000
test2_low.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,CLOSED-CAPTIONS=NONE,BANDWIDTH=2048000
test2_hd720.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,CLOSED-CAPTIONS=NONE,BANDWIDTH=4096000
test2_src.m3u8

共有1个答案

牛凌
2023-03-14

解决方案相当简单:在播放列表中添加选项RESOLUTION,如

hls_variant _src BANDWIDTH=4096000 RESOLUTION=1920x1080;

这将使插件能够正确呈现选择器。这方面没有手册。

配置现在看起来像这样

 worker_processes  1;
 events {
 worker_connections  1024;
 }
 # RTMP configuration
 
 rtmp {
 server {
 listen 1935; # Listen on standard RTMP port
 chunk_size 2048;
 # This application is to accept incoming stream

     application 00kSLqEV5a6LYVfFa1jG {
         live on; # Allows live input
 
                 exec ffmpeg -i rtmp://127.0.0.1/$app/$name
                     -c:v libx264 -c:a libfdk_aac -b:v 768k -b:a 96k -vf "scale=720:trunc(ow/a/2)*2" -tune zerolatency -preset veryfast -crf 23 -f flv rtmp://127.0.0.1/show/$name_low
                     -c:v libx264 -c:a libfdk_aac -b:v 1920k -b:a 128k -vf "scale=1280:trunc(ow/a/2)*2" -tune zerolatency -preset veryfast -crf 23 -f flv rtmp://127.0.0.1/show/$name_hd720
                     -c copy -f flv rtmp://127.0.0.1/show/$name_src;
 
         on_publish #server_auth;
 
     }
 
     application show {
         live on;
         # Turn on HLS
         hls on;
         hls_path #YOUR_PATH;
         hls_fragment 5;
         hls_playlist_length 30;
         # disable consuming the stream from nginx as rtmp
         allow publish 127.0.0.1;
         allow publish 139.18.13.224;
         deny publish all;
 
 
     hls_variant _low BANDWIDTH=288000 RESOLUTION=848x480;
     hls_variant _hd720 BANDWIDTH=2048000 RESOLUTION=1280x720;
     hls_variant _src BANDWIDTH=4096000 RESOLUTION=1920x1080;
 
    }
 
 }

 
 }
 
 http {
 sendfile off;
 tcp_nopush on;
 # aio on;

 directio 512;
 default_type application/octet-stream;
 include /usr/local/nginx/conf/mime.types;
 server {
     listen 80;
 
     location / {
         # Disable cache
         add_header 'Cache-Control' 'no-cache';

 # rewrite ^(/hls)/(\w+)$ $1/$200kSLqEV5a6LYVfFa1jG.m3u8;

         # CORS setup
         add_header 'Access-Control-Allow-Origin' '*' always;
         add_header 'Access-Control-Expose-Headers' 'Content-Length';
         add_header 'X-Frame-Options' 'DENY' always;
 
         # allow CORS preflight requests
         if ($request_method = 'OPTIONS') {
             add_header 'Access-Control-Allow-Origin' '*' always;
             add_header 'Access-Control-Max-Age' 1728000;
             add_header 'Content-Type' 'text/plain charset=UTF-8';
             add_header 'Content-Length' 0;
             return 204;
 
         }
 
         types {
             application/dash+xml mpd;
             application/vnd.apple.mpegurl m3u8;
             video/mp2t ts;
             text/html html;
             application/x-javascript js;
 
 # text/javascript js;

             text/css css;
         }
 
         index index.html;
 
     root #stream_root;
     location ~ \.php$ {
     fastcgi_split_path_info ^(.+\.php)(/.+)$;
     fastcgi_pass unix:/var/run/php-fpm.sock;
     set $path_info $fastcgi_path_info;
     fastcgi_param PATH_INFO $path_info;
     fastcgi_index index.php;
     include fastcgi.conf;
     fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
     fastcgi_param SCRIPT_NAME $fastcgi_script_name;
     fastcgi_param HTTP_PROXY "";
     proxy_set_header X-Forwarded-Uri /matomo;

 
 }
     }
 }
 
 }
 类似资料:
  • 请帮助解决这个问题。多谢.

  • 我正在尝试不同的方式选择一个特定的按钮使用seleninum webdriver与Java,但不幸的是,没有任何工作。 当我测试使用Selenium时,IDE是工作的。例如,我复制了相同的xpath,但当我试图在Java应用程序中进行测试时,任何东西都不起作用。我尝试使用不同的方法,通过.cssselector和通过.path。 这是我的HTML: 我需要选择带有文本“Create Applica

  • 我正在尝试从一组大小未知的单选按钮中进行选择。(多套,但一步一步..)在实际站点上,它们不是值的text1。表单id是随机生成的,但遵循一种模式。所以我不能真的使用它。我得到了一个一致的课程.. 我已经尝试添加结束,什么也不会发生。

  • 本文向大家介绍Jquery选择器中使用变量实现动态选择例子,包括了Jquery选择器中使用变量实现动态选择例子的使用技巧和注意事项,需要的朋友参考一下 例子一: 例子二: 例子三、jQuery中选择器参数使用变量应该注意的问题 这是原来的代码 实现的是关键词替换,不过到第三行时候不执行了,调试啊,替换啊,都不行。 从早上到刚才一直在各种群里面发问,终于 …… 俺们大本营 的Lomu大神一阵见血:

  • 我在创建一个基本的discord机器人(用于播放音乐)时遇到了一些错误。我主要依赖于文档——我想我复制并粘贴了discord中的某些代码行。“断章取义”的js文档示例。但我不知道它们可能是什么,因为我对编程还是很陌生。 我安装并导入了所有必要的依赖项,所以这不是问题所在。我的机器人工作正常(收听和回复MSG)。 这是与音乐功能相关的代码 这是我得到的错误: 难道是: 机器人需要先进入通道?(这意味

  • 我正在尝试加载测试从存档数据库中获取记录的java servlet。 servlet的工作原理如下: 1-从HTTP头读取post变量 2-使用变量查询数据库 3-XML 我已经设置了一个测试,我想用post变量触发HTTP请求,但是测试不起作用,J Meter出现错误。 我已将CSV文件放在保存我的测试计划的同一文件夹中! 这是错误输出: 线程名称:线程组1-1示例开始时间:2012-11-20