I have assembled a website and configured a Digital Ocean droplet to serve an audio stream using Azuracast.
At this URL http://137.184.153.182:8010/radio.mp3 lives the live audio stream. At the time of posting I am streaming static from Audio Hijack, which you can hear by visiting the URL and clicking play on the audio element. By inspecting the site I see the following HTML
<video controls="" autoplay="" name="media"> <source src="http://137.184.153.182:8010/radio.mp3" type="audio/mpeg"></video>
On the site meant to deliver the audio stream to listeners https://feverdream.radio, I have placed an identical HTML snippet. However the play button remains grayed out and I am unable to play the audio live stream.
I do not understand what I could be doing wrong so that the same code is functional on one URL but not another.
an insecure HTTP resource is being loaded for an HTTPs website. Open the browser console to see the error below:
Mixed Content: The page at 'https://feverdream.radio/' was loaded over HTTPS, but requested an insecure element 'http://137.184.153.182:8010/radio.mp3'. This request was automatically upgraded to HTTPS, For more information see https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html
The SSL/TLS certificate authority for 137.184.153.182 should be either:
Publicly issued - see Let's Encrypt
Privately trusted - see how to trust a self signed certificate for your non-public development environment.
Related
I have my web application which has many audio files. I have kept these files on my Nginx server.
On my HTML page, I am using audio tag.
My question is when my HTML page loads on the web browser then do all the audio files will get downloaded at the same time? Or when the user plays particular audio file, then only that audio get streamed and downloaded.
Since my page has many audio files, so I need only that audio gets streamed/downloaded to the user which he plays.
A given media file will only get downloaded after you have clicked on a link
You can confirm this yourself by getting onto your page in question then hit F12 or ctrl-shift-i in your browser (firefox/chrome/opera) to open up your developer tools then hit the Network tab which will display network traffic ... once there do a page refresh and observe traffic ... next to none since no media files have been requested
Now click on a media link to request a download and only then will you see significant network traffic as the media packets come tumbling into the browser
By default above setup will just download the mp3 not stream ... to stream an mp3 file create on server side a text file called mysong.m3u which contains URL of actual mp3 file
http:///sorabhdomain.com/mymedia/mysong.mp3
then have the browser link use the m3u URL not the mp3 URL and the browser should now stream not download
I have a Java application that can run as a regular java Swing application but creates a standard html5 report that opens in a webbrowser.
e.g
Browser Url is:
file:///C:/Users/Paul/AppData/Roaming/SongKong/Reports/FixSongsReport00574/FixSongsReport00574.html
As part of that it uses a audio tag to allow the song to be played in the browser
<h5>
<audio controls="controls">
<source src="file:/E:/Test4/test.WAV">
</audio>
</h5>
and that works fine.
But the application can also run with a Html User Interface, it then runs a webserver using Java Spark on port 4567, if I then serve the exact same report (yes i am actually serving files the same files on the disk) to the same computer so the audio file is local to the computer it will no longer play the song.
This would be the Browser Url
http://localhost:4567/FixSongsReport00574/FixSongsReport00574.html
So why is this, since I am specifying the full path in the source element and therefore I dont see why it would be affected by factors such as where static files are served from.
But in case relevant this is the java-spark start method
CustomJettyServerFactory customJettyServerFactory = new CustomJettyServerFactory();
EmbeddedServers.add(
EmbeddedServers.Identifiers.JETTY,
new EmbeddedJettyFactory(customJettyServerFactory));
staticFiles.externalLocation(Platform.getPlatformReportFolder().getPath());
staticFiles.location("");
staticFiles.expireTime(600);
SongKong.songKong.setRemote(true);
StartPage.recreateIndexPage();
init();
configureWebEndPoints();
configureApiWebEndPoints();
before((request, response) -> {
MainWindow.logger.severe(">>>>>"+request.uri());
});
listenForFinish();
The follow up question is that although I don't understand why it doesn't work on a local computer I can see that if was connecting via a remote browser then it would not work because the file url is relative to the server not the client machine, how would i make file playable in such a case.
You can't mix HTTP server and file protocols into one for security reasons. So what you need to do is below
While serving any html file read its contents and replace file:/ by something like /localfile?url=
And then you will need to create a /localfile endpoint in your embedded server code, which will read the url and then stream the file locally. Your server code will be able to access the local file and stream it.
There used to be few techniques back in the days of FF11, but they are not valid anymore
How do I view file:// images from http://localhost served pages in Firefox 11?
try this i hope it will help you
How to?
In order to make your web page plays music, the html code can be as simple as
<audio src="the location of the music url" controls> </audio>
example
<audio controls>
<source src="/assets_tutorials/media/Loreena_Mckennitt_Snow_56bit.mp3" type="audio/mpeg">
<source src="/assets_tutorials/media/Loreena_Mckennitt_Snow_56bit.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
Is it possible to play a video via the HTML5 video tag using HTTPS as the video source? Our page is entirely in HTTPS, however when you browse we are getting the mixed http/https mode message. The video configured to use HTTPS as the source is changing to HTTP somehow. We don't see any 302 redirects coming from the web server. Is this browser dependent? We've tried all possible browsers. Code snipplet below from the developer tool output.
<video id="homepageCenterVideo_html5_api" class="vjs-tech" preload="auto" data-setup="{}" poster="/CMSImages/static_image.jpg" src="https://www.domain.com/Video/Makes_It_Easy.mp4" controls="">
<source src="https://www.domain.com/Video/Makes_It_Easy.mp4" type="video/mp4">
</video>
If you were to copy that URI and paste it into the URL bar, you can see that it changes from https to http and we still don't see any 302 redirects coming from the server.
We got the HTML5 video to work using HTTPS, however we still don't know why. The back-end server is IIS. The directory housing the video file is named "video". If we change the name of that directory, or put the video file in another directory it's able to stream using HTTPS just fine. If we rename the directory back to "video" it won't work and uses HTTP. Very weird, but we're assuming it has something to do with IIS settings somewhere.
My website has some embedded Youtube videos where the embed URL uses http and the webpage is also served through http. Some of my users (i.e. using Google Chrome on Windows) have told me that the video isn't playing. However, after changing the embedded URL to serve through https, it seems to play fine (at least on Chrome). Before I change all of the embedded urls to https, my question is whether there's ever an issue serving an embedded video through https if the webpage that it's embedded in is served through http (I know that there can be "mixed content" issues if an embedded video is http while the webpage is served through https).
The code I am using:
<iframe align="middle" frameborder="1" height="500" scrolling="yes" src="youtube.com/embed/video_id"; width="800"></iframe>
Thanks!
The issue would be the same as with any HTTPS resource - if the certificate can't be validated for whatever reason, the embedded resource won't be shown or the user will get a warning (depending on the browser implementation).
I am wondering if it is possible to embed a YouTube video on a https website. As far as I can tell YouTube videos can only be embedded with the http:// protocol. Is there a way to embed them on a page without Firefox throwing an error?
I really do not know if this works, but you should give it a try:
Instead of the YouTube player you use your own custom player (made by youself or take from the web, there are a lot out there. e.g.: JW Player) This player is served by your secure server.
Before you play a video you have to call the Youtube API the recieve the source of you video:
http://gdata.youtube.com/feeds/api/videos/VideoID
Get you player streaming this video.
Within your player you should be able to allow recieving unsecure content from a secured website. You probably have to a little bit reading on the Flash Players security sandbox.
Unfortunately, Youtube doesn't have a valid SSL certificate installed on the main part of its site. You can try using a proxy such as https://browseunblocked.com/
Since Youtube doesn't have a valid SSL certificate, this won't be possible. Perhaps you could instead embed a HTTP iFrame containing a YouTube video inside your https webpage? Streaming a video over SSL would be slow, so unless the video itself needs to be encrypted, you shouldn't use it. Since you're talking about streaming YouTube videos, I doubt you care about encrypting the actual video stream, just the request to view it.
You could proxy the youtube stream through a secure server. What I mean is have a middle tier application that fetches the video feed from youtube and passes it through a secure connection back to your flash app.