When you open the developer console you can see message like:
Mixed Content: The page at 'https://mypage.com/' was loaded over HTTPS, but requested an insecure resource 'http://mypage.com/manifest.m3u8’'. This request has been blocked; the content must be served over HTTPS.
[blocked] The page at https://mypage.com/ was not allowed to display insecure content from http://mypage.com/manifest.m3u8.
When you have a web page served over SSL (lock icon next to URL) then content over SSL/HTTPS connections can be loaded only. All content with ‘http://’ will be blocked as possible security leak for the web page. Such a rule works for all content types like images, fonts, video or audio. So all html5 video players will not work with such links.
How to solve:
Best solution is to also use HTTPS connection for video content. At the beginning change the video stream URL from http:// to https:// and reload the web page. Frequently streaming servers also support HTTPS connections, so it is worth a quick checking. If it is not supporting HTTPS, then you will need to ask your streaming server provider for such change.
Optional quick solution: Using web page over HTTP and HTTP connection with streaming server. Of course this has a l ack of security between viewer and your page, but can be useful for some public events.
When you got message like:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://example.com/manifest.m3u8 . (Reason: CORS header 'Access-Control-Allow-Origin' missing).
Then it means that the streaming server is not allowing for loading video content for html5 video player from a different domain than a web page. If your streaming server and web page are hosted on the same domain eg. mydomain.com, then you will not see such a message. But when you load video from some different domain eg. streaming.mydomain.com , then in HTTP response from the streaming server there is required to add Access-Control-Allow-Origin: mydomain.com for allowing to play content on mydomain.com . You can also set Access-Control-Allow-Origin: * , which will allow you to play video on any domain (useful for testing).
How to solve:
Only solution for this issue is to update HTTP streaming server settings.
For apache2 server: https://httpd.apache.org/docs/current/mod/mod_headers.html (or. Apache2 CORS headers in any web search engine)
For nginx server: https://nginx.org/en/docs/http/ngx_http_headers_module.html (or. nginx CORS headers in any web search engine)
More info about CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin
Frequently when you are trying to autoplay video with html5 video player playback is not starting and you can frequently see messages in developer console:
NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
or message from our player
Browser doesn't allow for autoplaying video without user interaction. Player is waiting for user 'play' click. You can autoplay muted video (mute=true)...
Many browsers block all html5 video players to play video without any user interaction like click/tap. Such a policy is even more restrictive for mobile devices.
How to solve:
There is no easy bypass for this browser’s policy rule. You can mute video before playback. Such video should be able to autoplay on PC and Android devices (but not on iOS).
More reliable and recommended solution is to gain browsers trust and wait a while. If you serve content desired by users and users frequently play it on your page, then your page is gaining “browser trust”. After several playbacks browsers will allow you to autoplay video for your page. Such behavior is especially designed to video serving web pages, when you can open page from link and main content video will automatically starts (eg. youtube.com , www.dailymotion.com , vimeo.com).
Tip: If you are using Chrome browser, then you can check “browser trust” by opening chrome://media-engagement/ in your browser. It is special page served by your browser with information about your engagement on media pages indicating if video/audio can autoplay there.
Some more details:
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari