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.
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?
If you try to open the audio file in a browser, the browser will create the following code:
<video controls autoplay name="media">
<source src="https://stopmusic.net/_ld/65/6549_B.B.E-Seven_Day.mp3" type="audio/mp3">
</video>
Why does he create the markup using the <video> tag?
If we look at the specification, we will see the following:
When an image, video, or audio resource is to be loaded in a browsing
context, the user agent should create a Document object, mark it as
being an HTML document, set its content type to the computed MIME type
of the resource (type in the navigate algorithm), initialize the
Document object, append an html element to the Document, append a head
element and a body element to the html element, append an element host
element for the media, as described below, to the body element, and
set the appropriate attribute of the element host element, as
described below, to the address of the image, video, or audio
resource.
As you can see when opening a particular media file in a browser, the browser creates the specific code associated with it. And in this case, for some reason, the browser does not create the code associated with it. Why it happens? Is this an implementation specification error?
I am assuming that this is something that Google Chrome does autonomously, I feel as though that they have their own proprietary algorithm that equates file types to specific tags such as <video>,<audio> and <img>. I would also think that a .mp3 file would be opened by the <audio> tag and nothing else because it is an audio file. After considering these things, it makes no logical sense that this feature would perform the things that it does on the production side of things. One would assume that any file ending with the extension of 'mp4' to use the <video> tag. I think that this is a prime example of a feature that they were finishing up and decided to push it anyways because it worked and did not require any more effort.
Hi,
I developed a simple web server based on an open source C++ project.
In this web server there are a lot of wave files which I would like to show to web clients by using tag of HTML 5.
I added wave files like following sample in html files which are sent to web browsers.
<audio controls>
<source src = "sound.wav" type="audio/wave">
</audio>
But Now I would like to know how web servers handle tag and send stream data to web clients when web clients push play button.
I need to implement it from scratch in my web server.
I read a lot of posts but most of them just handle client side issues.
I need to deeply know how server side of a request is handled.
Best Regards
AS you can see in MDN doc https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
The HTML element is used to embed sound content in documents.
It may contain one or more audio sources, represented using the src
attribute or the element; the browser will choose the most
suitable one.
The stream is not send to web clients when web clients push play button but is send when the page is loaded (lile all the media in a web page)
you can control the execution using some attribute like :
autoplay
A Boolean attribute; if specified (even if the value is "false"!),
the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading.
buffered
An attribute you can read to determine which time ranges of the media have been buffered.
This attribute contains a TimeRanges object.
preload
This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values:
none: indicates that the audio should not be preloaded;
metadata: indicates that only audio metadata (e.g. length) is fetched;
auto: indicates that the whole audio file could be downloaded, even if the user is not expected to use it;
the empty string: synonym of the auto value.
Serving a file is something I bet you already know. To serve audio streaming, there are streaming protocols. One is ShoutCast and here you have a nice example in Python.
https://github.com/inforichland/PyCast
I ran into this peculiar problem that I couldn't get HTML5 video to loop on my local development environment (ASP.NET + IIS7). The video autoplays just fine. My code looks like this:
<video id="frontpage-video" autoplay loop>
<source src="http://test-site:8084/video_mp4.mp4" type="video/mp4">
<source src="http://test-site:8084/video_webm.webm" type="video/webm">
</video>
If I change video source URLs to some publicly available URLs (for example to dropbox), loop works just fine. This is not a major problem since I think (hope) it will work once my site goes live and the video is publicly available.
My question is: Can I make the video loop if my video is not publicly available?
I couldn't find similar problems by googling. Could it be some kind of IIS setting that prevents videos to loop?
Update 1: The problem seems to occur only in Chrome. Firefox and IE works fine.
Update 2: It seems that the video will stop at the end but never returns true for element.ended
> document.getElementById('frontpage-video').duration;
< 16.12
> document.getElementById('frontpage-video').currentTime;
< 16.12
> document.getElementById('frontpage-video').ended;
< false
Update 3: Problem is either in IIS or in Telerik's Sitefinity CMS. Server should send a "206 Partial Content" status but instead it sends 200 OK. Has any Sitefinity users had this problem and know how to solve it?
It looks like your problem is that you're not using HTTP Byte Serving. Your server is sending a "200 OK" response, but it should be sending "206 Partial Content" along with these headers:
Accept-Ranges:bytes
Content-Range:bytes 0-1492370/1492371
The byte range request allows the browser to request only the portions of the file that it needs. So if you seek around, it can skip right to that point.
With the regular 200 response, you will usually at least find that you can't seek in the video. But, depending on how your video file is encoded and where in the file the metadata is placed, you may see more problems. Sometimes the file might not even play at all. WebM is usually more robust than MP4, which can be all over the place.
I don't know IIS well enough to tell you how to configure it, but try starting here:
http://blogs.visigo.com/chriscoulson/easy-handling-of-http-range-requests-in-asp-net/
Chrome/Opera can't loop the video if the video itself is not served with HTTP 206 Partial Content response but 200 OK instead.
The problem is that Sitefinity's storage providers do not support partial content (version 7.0). They are planning to implement this for the future.
At the moment the possible workaround is to use an external blob storage provider such as Azure, Amazon or ExternalFileSystem (ExternalFileSystemStorageProvider).
I got this information from Sitefinity's support team.
May be MIME type in IIS is not set up for MP4.
Open IIS, and locate you default page. You'll see MIME type in right pane.
Click Add and put field1=.mp4 and field2=video/mp4.
Restart IIS.
Hope this might work.
In your question, your video-element doesn't have the id frontpage-video (but i guess it's copy paste?)
check if the video end event is called in your webkit browsers, and if so, restart your video.
.
<script type='text/javascript'>
document.getElementById('frontpage-video').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
//restart your video
}
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.