H5播放m3u8文件 无法在网页上实现。

Question

nginx+ffmpeg+rtmp实现rtmp点播/直播和hls直播。我的目的是想在手机 电脑上都播放直播界面 然后目前配置了hls可以实现播放，m3u8文件 问题是 直接在电脑/手机浏览器输入http://url/hls/myapp.m3u8 可以播放。但是通过放到网页却没办法正常播放。
conf的配置如下。请大佬看一下是啥问题

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
        location /live {
            flv_live on; #打开HTTP播放FLV直播流功能
            chunked_transfer_encoding on; #支持'Transfer-Encoding: chunked'方式回复

            add_header 'Access-Control-Allow-Origin' '*'; #添加额外的HTTP头
            add_header 'Access-Control-Allow-Credentials' 'true'; #添加额外的HTTP头
        }
         location /hls {
            types {
                application/vnd.apple.mpegurl m3u8;
                #或 application/x-mpegURL
                video/mp2t ts;
            }
           alias /usr/local/nginx/html/hls; #视频流文件目录(自己创建)
            expires -1;
            add_header Cache-Control no-cache;
            }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}
rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir /tmp;

rtmp {
    out_queue    4096;
    out_cork     8;
    max_streams  128;
    timeout      15s;

    log_interval 5s; #log模块在access.log中记录日志的间隔时间，对调试非常有用
    log_size     1m; #log模块用来记录日志的缓冲区大小


    server {
        listen 1935;
        server_name localhost; #用于虚拟主机名完全匹配

        application myapp {
            live on;
             hls on;
             hls_path /usr/local/nginx/html/hls; #视频流文件目录(自己创建)
             hls_fragment 3s;
            gop_cache on; #打开GOP缓存，减少首屏等待时间
        }
    }
}

Answer 1

参考GPT和自己的思路：

根据你提供的配置文件，你的nginx服务器中已经配置了hls（HTTP Live Streaming）直播的相关功能。在http部分的配置中，添加了对m3u8和ts文件的MIME类型支持，同时在location /hls指向的视频流文件目录中配置了相关参数（如expires，Cache-Control等）。

但是你提到通过直接在浏览器中输入http://url/hls/myapp.m3u8%E5%8F%AF