I am trying to make demo with track tag but track tag is not working from below code my video play only but subtitle is now show on screen
<!DOCTYPE html>
<html>
<head>
<title>track</title>
</head>
<body>
<video autoplay="true" controls="" >
<source src="http://www.html5rocks.com/en/tutorials/track/basics/treeOfLife/video/developerStories-en.webm" type="video/webm; codecs="vp8, vorbis"">
<track src="http://www.html5rocks.com/en/tutorials/track/basics/treeOfLife/tracks/developerStories-subtitles-en.vtt" label="English subtitles" kind="subtitles" srclang="en" default=""></track>
</video>
</body>
</html>
Text tracks are subject to Cross Origin Resource Sharing, which means two things in this case:
Your <video> element must have the crossorigin attribute.
The text track source must be served with proper CORS headers.
In this case, the html5rocks site has not enabled any CORS headers for the subtitles, so you won't be able to use them.
1) Make sure to use .vtt subtitle files. If not there convert using some online tool.
2) Use kind="captions"
3) Run over localhost using xampp...like software
I got the same problem recently. You have to make sure that
The extension of track file should be .vtt (as told in earlier answers)
Imp. Make sure that the file is loading into the browser successfully.
To do that, right click and click, inspect element and go to console tab.
Do you see here a message saying "Unsafe attempt to load URL ..."? resolve that.
One of the way of doing that is,
keep the .vtt file in same directory as of index.html
Run the file on some local server. ( you may use any extension, like live server for visual studio code.)
This wil enable browser to load both file and security issue will be arised.
Related
everybody.
I'm having a problem that moved discussdion in the WEB before, but by now, I can't really find an answer, of better I'm not really understanding the matter.
So, I need to add some subtitlers track to some videos, I'm studying to put in a website.
I know that video are managed in HTML5 form the VIDEO tag, and subtitles from the nested TRACK tag. Video tracks must be in the WebVTT format.
As a first experience, I created a very simple markup by applying the basic controls, using a video file in .webm format and creating 2 simple traces of subtitles (first in .srt format, then transformed into .vtt), as follows:
<source src="Kayath[1].webm" type="video/webm">
<track kind="subtitles" src="test_it.vtt" srclang="it" label="italiano" default>
<track kind="subtitles" src="test_en.vtt" srclang="en" label="english">
</video>
The .VTT tracks file are simple and I think correct. Her a beginning of one of them:
1
00:00:02.509 --> 00:00:07.509
Select "Release data download" item
2
00:00:08.045 --> 00:00:10.150
In the data download form
Now, I would like to check in local, to process and define subtitle formatting through the possibilities offered by WebVTT (at the moment each formatting code is absent), but the reproduction with Chrome gives me the following error, preventing me from the view of subtitles:
Unsafe attempt to load URL [...] from frame with URL [...] 'file:' URLs are treated as unique security origins.
I avoid reporting the URLs because the videos .webm and the .vtt are in the same folder.
A similar behavior is also found in Firefox, where the aforementioned error is not reported in the console, but the vtt tracks also do not appear.
With another browser (Vivaldi, Chrome-based) also an error is showed in console at the page loading, but it's different:
Text track from origin 'file://' has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute. Origin 'null' is therefore not allowed access.
So, it seems to say that a local works with .vtt files is impossible (but .webm work correctly).
In Stackoverflow, I found some answers, but I'm really surprised that there aren't any way to work locally, just to help with the VTT formatting definition.
Has anyone a solution, or I really must put files in a local server to test them?
I have HTML document that is supposed to play the audio file via tag.
My main problem is what kinda URL am I supposed to feed this tag in order for it to play.
For example, I have the file in folder completely different from HTML file, even stored on external SSD, and I have path to it, how do I play this file?
My code looks something like this:
<audio controls source="PathToFile"></audio>
It isn't possible to open arbitrary files from a user's local machine, as this has bad implications for security.
If you want to load local files, the user has to either select the directory/files with a <input type="file"> element, or they have to drag/drop the directory/files so that you can get a reference that way.
I guess you should have something likes this:
<audio controls autoplay>
<source src="/sounds/The Wolven Storm (Priscilla's
song).mp3"
type="audio/mpeg"/>
</audio>
If your website is hosted at some place that you have access to, your website is hosted on a local machine, and your SSD is plugged in to the same machine as your website, you could use absolute file paths inside of the quotes to achieve this.
for example:
<audio controls src="C:/Absolute/File/Path/To/Audio.mp3"></audio>
I hope this helped in answering your question.
I have a webpage with an audio player - normally the code would look like this
<audio controls="controls" preload="auto">
<source src="http://the_full_path/file_name.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
I want people to be able to listen to the file using the player without being able to download the file its playing. These are the first steps I took:
was adding controlsList="nodownload" to the player
disabling right click oncontextmenu="return false"
The problem: from any browser going to menu 'view-> page source' or clicking F12/Cmd+u will show the code thus the link will be reviled.
How can I achieve my desired outcome?
'and obviously there is a way to do it'
No there's not !
#zero298 answer is perfectly right(any resaerch you will do will said the same and you see your question is commonly asked for years with same answer.
All stuff you can do can easily be override because in order to use a file client side the file is download on client(cache) in order to be use by browser in local place.
Look to how WWW work and you'll understand better i think:
web server send(upload) HTML and others files related to client who get it(download) for use.
That's root of a network and can't be otherwise. If you need anything to be shared on a network you've to send it. So you can see/use(an get) a file who is not shared nor block a file once it is send.
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>
I am creating a html page that will be distributed and run locally. It has a video which is supposed to play on the page. When I run the page though, I receive an error saying Internet Explorer restricted this webpage from running scripts or ActiveX controls.
This will happen to the end users also. What can I do to allow the video to play right away so the warning box does not have to be allowed.
The current code I am using is:
<!DOCTYPE html>
<!-- saved from url=(0024)http://www.abc-defg.com/ -->
<html>
<body>
<div style="text-align:center">
<video id="video1" width="715" autoplay="autoplay">
<source src="images\abc Movie.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
I have the abc-defg is the same length as the company name
According to this MSDN discussion, the answer is no. This is an artifact of loading locally. You'll be fine when you put this on a live web environment. Objects loaded locally are treated differently,from a security standpoint, than hosted objects, so you can expect a completely different scenario when you have this video hosted on a remote web host.