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?
Related
I am new to HTML and CSS (So that may be the issue). I entered the following code into my html doc:
<video controls width="700">
<source src="video/PristineCustomCleansVideo.mp4" type="video/mp4">
</video>
The video I want to play is inside a folder called video. The index.html and the video folder are nested inside a folder together.
The video shows up on the site I'm making as a gray rectangle with controls (in a Brave browser). When I press play nothing happens. I also tried opening my page in Firefox and within the gray rectangle it says "No video with supported format and MIME type found."
I looked up this question and have found so many confusing suggestions. Whatever you recommend, please do it as if I know very little about computers (I thought I knew a good amount until reading some of the responses and can't follow what I should do. lol)
Another issue I am considering is if I have to do a lot of work to get the video to play, will others that I send my website URL to have issues as well? This is for a class project. I have to put everything on the school's server and share the URL with the teacher.
If your index page and the video are located in exactly the same place you do not need the video folder in the path to your file. The following should work.
source src="PristineCustomCleansVideo.mp4" type="video/mp4"
I have a simple web page written in HTML for testing video streaming.
<video controls name="media">
<source src="external_url.mp4" type="video/mp4">
</video>
That's work in local, but when I upload the page on my free web hosting, the page doesn't load any video. Is there a workaround? Maybe using an embedded player?
update
I've discovered that's a problem related to video. Unfortunately I cannot link it because it's for a private presentation, but I've tried with other videos and that works well. Any idea why my video doesn't play?
Please check that the URL is intact.
Check if there might be some file discrepancies. The control currently supports mp4, ogg, and webm as seen here.
Use the canPlayType() method to test the site AFTER the upload - just to be sure we're covered on that front. See here for the DOM reference.
You can fiddle around here if you don't want to have to upload the site first before live-testing it.
Hope that helps.
How do you upload the video? If FTP, text transfer mode may have ruined the file. The hosting (especially, a free one) can impose a limit on the file size (uploaded or served) too. Or even on content types (e.g. narod.ru didn't allow to read files directly, serving a "download page" on an attempt instead).
Try to download the video file directly and compare it with the reference one.
Here is the configuration of system I am using
Ubuntu : 12.04
Mozilla Firefox : 26.0
I have a mp4 file, when I open it directly in browser like
http://localhost/MyProject/web/video/samples/A001C026_140418WK.mp4
It runs in browser properly, but when I try the same file to render through html5 video, it is not getting played and shows below error.
No video with supported format and MIME type found.
I know this question is appeared many times but I did not get the clear way to kick this problem, second thing this file is getting played properly using <embed> tag.
Video tag syntax
<video width="854" height="480" controls>
<source src="{{asset('video/samples/A001C026_140418WK.mp4')}}" type="video/mp4">
Your browser does not support the video tag.
</video>
path specified is correct, I have checked properly.
Please guide, where the things are going wrong or missing.
Thanks in advance.
Your problem seems to rely in the fact your mime types are not properly configured server side. Have a look here for set up steps. Make sure you restart/reload your web server for changes to be taken into account
After you have checked that it should work in a HTML5 video tag.
For MP4 H264/AAC to work with Firefox on Linux you need to have GStreamer codecs being installed. But I guess you have that covered. You can find more information in this article section notes.
You can check this question for further troubleshooting steps.
It seems that i cannot add .wmv-videos to my site, though some ppl (in Google search) says it can an anothers say it cannot...
But i only have these videoes in .wmv-format and therefore have to put them on page in this format.
I have tried many things as:
<video id="sampleMovie" width="300px" height="168px" preload controls>
<source src="video.wmv" type="video/x-ms-wmv" />
</video>
And also have i rendered my .htaccess
AddType video/x-ms-wmv .wmv
And also without the dot.
But what it tells me when i try to load the page with the video is:
"No video found with the supporting MIME-type"
(It says that on another language than english, so it might not be 100% correct, but the point should be there)
How can i make this work?
You have three options.
One:
WMV files can play in IE with the Windows Media Player object. See this.
Two:
There is no way. No browser (excpet IE with above solution) supports playing WMV files. You will have to convert it into a format that browsers know how to play. A free online converter to MP4 is
here
and a standalone one is here.
I want to set <track src to a "data:" URI.
<video>
<source src="http://the.othersite/foo.mp4">
<track src="data:text/vtt,WEBVTT">
</video>
However, I get
Cross-origin text track load denied by Cross-Origin Resource Sharing policy.
The error occurs in both Chrome and Safari.
If I set track src to "/foo.vtt", it works. The "Origin" of Data URI is not the current page uri?
Jsfiddle example here. (Look at the error output in the Console.)
Browser support for setting the track data via data URIs appears to be incomplete and buggy. Here is a list of bug reports for each browser.
Firefox appears to support setting track directly in the HTML using base64 encoded data URIs (jsfiddle). Updating the track src via JavaScript appears to work but doesn't appear to affect that actual track data that is in use.
If you really need to update the track data via JavaScript, you can manually parse the WEBVTT text and add it a Cue at-a-time. This page describes all the methods that don't work for including VTT data directly in the page and gives an example of parsing and Cue loading at the end.