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.
Related
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.
I have an Apache server with a webpage written in HTML5 that has a video tag to play video from a webcam. I use VLC to stream the video over HTTP in OGG. My problem is that I can play the video in a browser from the computer where the server is allocated, but from another computer the video window is blank.
I have done some tests to try to solve my problem:
if I put a video file in htdocs and the corresponding line in the html file, the video is played.
If the stream is a video file instead of video from the webcam, there is the same problem.
With VLC option Open Network Stream the video is played successfully from another computer.
When I have the blank window problem, with wireshark I don't see the stream being downloaded.
This is how I use the video tag:
<video id = "myVideo" src="http://localhost:8081/stream.ogg" type="video/ogg; codecs=theora" autoplay="autoplay"></video>
I would appreciate any suggestion, thank you in advance!
Kiko
http://localhost
Localhost will always point to your local computer. So if you run the application on the server the video file will actually resides on, it will find the file.
But if you are running the script on another computer, this computer will actually look locally, where the video file does not resides.
Try replacing http://localhost with the external IP-adres of your server.
I have used HTML 5 audio tags like the following
<audio controls="control_2">
<source src="D:\HND_grrrrr\Year_2\RoyWebsite\Sounds\WAV\home_page_readout.wav" type="audio/wav"/>
<source src="D:\HND_grrrrr\Year_2\RoyWebsite\Sounds\MP3\home_page_readout.mp3" type="audio/mp3"/>
<source src="D:\HND_grrrrr\Year_2\RoyWebsite\Sounds\ogg\home_page_readout.ogg" type="audio/ogg"/>
</audio>
Now when i load the page when it is not uploaded to a server it manages to work on chrome and IE, however on other browsers the player appears, but there appears to be no file as nothing happens when i press play.
Now when i put the page to the server (I am using USB webserver V8.2) i get nothing no matter what browser the players dont even show. I have tried changing the links to relative and nothing and ive checked that all my files are there and they are. They work when I click on the actual file on the server so i dunno.
Any help would be appreciated thanks :)
To solve the second half of your question, and potentially the first, use relative paths to load the audio files. So if your web server loads the file from /var/www/website/index.php, places the files in a closer path, ie /var/www/website/sounds, and then load the files from ./sounds/FILE_NAME.EXTENSION
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.