Html5 live stream

Website Building
#1

Hello, i have strange fact, so , i use flowplayer for html5 live stream, and it’s working on my server but when i use it for 000webhost it’s show me “hlsjs: Video file not found” , how can i fix it?

#2

Hi @hhypnos!

Please make sure the video has been uploaded and linked properly. Note that files names are case sensitive. /foler1/file1.mp4 will not be the same with /folder1/file1.MP4

#3

Hi, i have live stream video not mp4 or other formats… so i thought it was my problem but when i change 2 js lines

"<script src="flowplayer/flowplayer.min.js"></script>

<script src="flowplayer/hls.js"></script>"
to this
"
<script src="flowplayer/hls.js"></script>
<script src="flowplayer/flowplayer.min.js"></script>
"
it is working and it ask me for flash player but on digitalocean server first method works fine and it isnot asking for flash player…

P.s i use on digitalocean i use Nginx

#4

Please switch the scripts the way they wore, browse your webpage, hit F12 and go to Console tab. Also, go to Network tab as well. Maybe you’ll find details about your issue there.

Also, what is the webpage URL?

#5

in console it shows "XMLHttpRequest cannot load http://138.197.102.228/live/test/index.m3u8. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://somnium.space’ is therefore not allowed access."
p.s url is somnium.space/UG/flop.html

#6

This is a security issue thrown by the browser. I have added origin support in your .htaccess. Please try it now.

EDIT: And it’s not working…

For this to work you’ll need to add Cross-Origin support on the host from which the information is being fetched (which in our case is 138.197.102.228)

EDIT: I have re-updated the .htaccess, but the playlist is now missing. Please update the playlist and try again…

1 Like
#7

sorry i deleted some files, i will restore it and write here what will happen

#8

Please do so.

If it will not work, please create a .htaccess file in the root of 138.197.102.228 website and add the following code to it:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Content-Type"
Header set Access-Control-Allow-Methods "GET"
1 Like
#9

same error “XMLHttpRequest cannot load http://165.227.129.81/live/test/index.m3u8. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://www.somnium.space’ is therefore not allowed access.”

#10

The source server must have Access-Control-Allow-Origin header set up, otherwise it will not work.

This issue is not related to 000webhost.

1 Like
#11

Okay, thank you very much ^~^

#12

You’re welcome :wink:  

1 Like
#13
#14
#15

I found solution for this problem , if someone want to make live stream with HLS and Nginx , you should open “Access-Control-Allow-Origin” on your server, this is nginx.conf “code” i mean configuration for “Access-Control-Allow-Origin”.

server {
    listen 8080;

    location /live {
        # Disable cache
        add_header Cache-Control no-cache;

        # CORS setup
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        add_header 'Access-Control-Allow-Headers' 'Range';

        # allow CORS preflight requests
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Headers' 'Range';
            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/vnd.apple.mpegurl m3u8;
            video/mp2t ts;
        }

        
        }
}

that “code” for application and also you should add one “code” in root of nginx.conf "location / "

location / {
    # Disable cache
    add_header 'Cache-Control' 'no-cache';

	# CORS setup
	    add_header 'Access-Control-Allow-Origin' '*' always;
	    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
	    add_header 'Access-Control-Allow-Headers' 'Range';

	    # allow CORS preflight requests
	    if ($request_method = 'OPTIONS') {
		    add_header 'Access-Control-Allow-Origin' '*';
		    add_header 'Access-Control-Allow-Headers' 'Range';
		    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;
	    }
}
1 Like
#16