Stream video with videojs - video.js

I use videojs and hls to stream video. The .m3u8 loading is found but I have this error. Anyone know how to fix this?
Mixed Content: The page at 'https://domain/course/9/154' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://domain/public/storage/course_154_9/lesson_55/enc.key'. This request has been blocked; the content must be served over HTTPS.
Thank you very much

As the error states, the browser is blocking an http URL because the page is https. The http URL is http://domain/public/storage/course_154_9/lesson_55/enc.key which looks like an AES key which will be listed inside the m3u8 playlists of your HLS stream. You need to make sure your HLS contains only https URLs.

Related

Force all third party requests from Youku to be over https and not http

I have a website that embeds the Youku video player. This player is loading some insecure resources (over http instead of https). The player itself is loaded over https as outlined in this SO thread, but it loads some insecure resources. The insecure resource in question can be accessed via https: https://g2.ykimg.com/052100015C8F58A9AD97EB1AC20B9132
Is there a way to force all request being made from my Vue app to be loaded via https?
In the end the solution was to include a meta tag in the header.
'<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

HLS on an HTTPS page for HTTP sources

Is it possible to use non-SSL sources with HLS on a page and playlist served via SSL HTTPS?
I have a page served over HTTPS. It uses Video.js to play a .m3u8 playlist. The playlist is fetched from the same server over HTTPS and is dynamically generated. The individual .ts segments within the playlist are stored on a CDN.
I'm finding that the SSL handshakes for each .ts GET request are high. Would like to instead make the .ts GETs use non-SSL HTTP -- the video content is not sensitive (and if it were, HLS supports symmetric AES encryption which is significantly faster than the asymmetric SSL handshake).
However, Chrome is refusing to load the .ts segments from a non-SSL HTTP source:
video.js:26948 Mixed Content: The page at 'https://localhost' was
loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint
'http://foo.com/20180110144476.ts'. This request has been blocked;
the content must be served over HTTPS.
Add a content security policy does not help:
<meta http-equiv="Content-Security-Policy" content="connect-src http://foo.com 'self';">
Since the ts files are fetched via XMLHttpRequest they're considered active mixed content and modern browsers will block access by default.
The CSP's connect-src option further restricts the origins you can connect to and it won't allow you to bypass the mixed-content check.
I'm afraid the only way is to serve everything over either HTTPS or HTTP.

How can i use react-leaflet with https?

Is it possible to use react-leaflet with https connection?
It seems I cannot switch between HTTP and HTTPS protocol, so i get a warning:
Mixed Content: The page at 'https://localhost/map' was loaded over
HTTPS, but requested an insecure image
'http://b.tile.osm.org/10/510/340.png'. This content should also be
served over HTTPS.
Maybe somebody knows a workaround.

Adding CORS headers when requesting .m3u8 files using reverse proxy

I'm building a Chromecast app, where I want to stream .m3u8 files (HLS) from a streaming provider. The streaming provider does not add CORS headers to the HTTP headers, which is a requirement for building Chromecast apps.
Is there any way to route the requests through a proxy, and have the proxy add the necessary headers for .m3u8 files? AFAICS, the .m3u8 files further point to files for the different bandwith streams, so it would be necessary to have the proxy add appropriate CORS headers to the header for those files as well.
Here is an example of a link to a .m3u8 file that I want to be able to stream.
Hey I realise I'm a bit late but I thought I would post here in case other find it usefull. I had the same problem when developing a chromecast application. The simple solution I found was to include the TOMODOkorz library this will pass all http requests through it's proxy.
You could host your own proxy and change the library to point to yours relatively easily.
This is actually possible by rewriting the urls within Chromecast's Media Player Library and having these sub-playlists also proxy through a CORS proxy like http://www.corsproxy.com/.
To do this in your custom receiver, do not import the google-hosted library
<script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/mediaplayer/0.5.0/media_player.js"></script>
Instead, copy the obfuscated javascript directly into your receiver html page, and do the following:
Find+replace g.D.url=k with g.D.url='http://www.corsproxy.com/' + k.replace(/^(?:[a-z]+:)?\/\//i,'')
Find+replace url:k with url:('http://www.corsproxy.com/' + k.replace(/^(?:[a-z]+:)?\/\//i,''))
Now, if you send the initial contentId to Chromecast with the http://www.corsproxy.com/YOUR_M3U8_FILE_HERE you should have a fully functional HLS-playing Chromecast app.
Most providers have the ability to set CORS for their customers. Akamai certainly does.
I've been able to stream HLS to ChromeCast from an S3 bucket by adding a permissive CORS file to the permissions for the bucket.
To answer my own question:
This is not possible without rebroadcasting the streams. .m3u8 files are files containing links to other files, which in the end also contain the binaries. All of these, including the HTTP response containing the binary, needs the CORS headers for the Chromecast to display the contents.
If you're only looking to add CORS headers to textual responses corsproxy.com is a good alternative, a long with several available open source projects.

google translate not showing up when https is used in url

For some reason when you go to the url https://www.improvementskills.org/index.cfm google translate does not show up, but when you go to http://www.improvementskills.org/index.cfm it works fine. So I know the issue is with SSL and having https. Does anyone know what the problem is and how to fix it. Thanks!
You are loading Google's JavaScript with an http URL, even when your page is served with https. The browser rejects that, because it's insecure to include non-https content in an https page.
You need to do this:
<script type="text/javascript" src="//translate.google.com/...
rather than specifying the URL as http://translate.google.com/... By starting the URL at the double-slash, the browser will use whichever of http or https the page itself is using.