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.
Related
When opening a local HTML file in Safari with the following contents
<video controls autoplay src="video.mov">
<track default src="subtitles.vtt" />
</video>
where video.mov and subtitles.vtt are in the same directory as the HTML file, the video is correctly loaded and can be played, but the subtitles are not shown and the following error is logged in the console:
Unsafe attempt to load URL file:///subtitles.vtt from origin null. Domains, protocols and ports must match.
Is it possible to show a local video with local subtitles? Why does the video load correctly but the subtitles do not?
EDIT:
I don't intend to install or use a web server for this. I was just wondering why the video loads and the subtitles do not, but using a web server to work around this issue is too cumbersome for my simple needs.
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.
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>
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).
For an internal website, I'm trying to show an inline video of an avi file on the network.
<video class="VideoTagLink" src="file://\\network\path\file.avi" controls="controls"></video>
In IE9 I get a red X and Chrome only shows a play button -- is this a supported scenario in HTML 5?
edit:
I have changed my html to this:
<video class="VideoTagLink" controls="controls">
<source src="http://localhost:99/Handlers/GetVideo?path=\\network\path\file.avi" type="video/x-msvideo">
</video>
and my handler is just:
public ActionResult GetVideo(string path)
{
return base.File(path, "video/x-msvideo");
}
So I believe i'm sending the right content type. I verified in IIS that *.avi is mapped to video/x-msvideo. If I navigate to that src URL directly in either browser, I get a download prompt for the video file, so I assume that works fine.
See HTML5 Video Error - Internet Explorer 9. This happens because IE9 cannot determine the content type, and your file server is not sending a Content-Type header.
If you serve the file via HTTP, you can configure your web server to specify the correct content type.