i read the spec of MediaSource API :
http://www.w3.org/TR/media-source/ (working draft)
and
https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html (editor draft)
the first reference SourceBuffer method : appendArrayBuffer()
the second : appendBuffer()
in chrome it seems that the only method available on SourceBuffer is append() but i dont find any documentation on that one.
Can someone let me know if he have more infos on the append() method in chrome and if any browser implement the appendBuffer() or appendArrayBuffer() ?
Thanks
Current versions of Chrome (ie 25-stable, 26-beta, & 27-dev) essentially support the October 8th version of the Media Source Extensions spec. We are in the process of updating the implementation to reflect the current editors draft. There have been a lot of changes in the spec and it is going to take some time to get it all working.
For now you should just use the older version of the spec to implement your application.
After searching the specs revisions history it seems that chrome don't implement current spec which was changed on :
Version Comment
04 January 2013
Renamed append() to appendArrayBuffer() and made appending asynchronous.
Added SourceBuffer.appendStream().
Added SourceBuffer.setTrackInfo() methods.
Added issue boxes to relevant sections for outstanding bugs.
so append() was the old method name
Related
I am trying to experiment with IndexedDB Observables in Chrome.
According to the sample page they are available in Chrome 57+. I am on Chrome 84. Using the sample page linked, I get the error Uncaught ReferenceError: IDBObserver is not defined (Your browser may not support this feature.) I have similar issues with my own code.
What do I need to do to use IDBObserver?
Observers are an experimental feature only available behind a flag, as noted in the sample page you link to. Are you enabling the flag, either via the command line or chrome://flags/ ?
My intention is to analyze json strings as part of REST messages.
In Chrome there are possibilities to use Inspect -> tab Network to find the json string that I want. However I cannot find the json string in Firefox.
Does Firefox support this?
I will show an example from a public page.
Open https://www.theguardian.com/ in Chrome
Inspect (Ctrl-Shift-I) and select tab Network
Click UK (UK News)
On tab Response you will find json strings as for examlple comment-counts.json
like
{"counts":[
{"id":"/p/5kmed","count":269},{"id":"/p/5kkv8","count":39},
{"id":"/p/5kq4t","count":5},{"id":"/p/5k7x7","count":1064},
{"id":"/p/5ky88","count":1720},{"id":"/p/5kp8e","count":841},
{"id":"/p/5kkbv","count":692}]
}"
Image: Inspecting The Guardian UK News
In Firefox I cannot get this piece of code. I have tried Inspect Element tab Network and sub-tabs Headers, Params and Response.
Do anyone know if it is possible in Firefox and in that case how to get it?
Background: I'm working in a corporate linux system where I haven't authority to install so much. However I have access to Firefox 45.5.1 and a bad build of Chrome 43.0.2357.81.
Thanks for any idea you come up with.
AFAIK, Firefox currently offers only a "structured view" of JSON responses in the developer tools.
There is a ticket in Bugzilla requesting plain text view.
Not sure about Firefox 45, but the latest release offers a context menu entry which allows copying response text to clipboard. Maybe that helps.
With Rafael's answer I found out what I needed.
Sometimes Copy Response works fine.
When that does not work I can find what I need from Copy All As HAR, which contains more or less everything before "now".
Since I'm a newbie I can neither flag up Rafaels answer nor flag that this question has been answered.
From my perspective I am fully satisfied and the case can be closed.
I'm using mobile template HTML files on a PHPBB forum.
I tested the html for errors at http://validator.w3.org/
The test results showed the following error
Line 24, Column 66: {navlinks.FORUM_NAME}
Bad value up for attribute rel on element a: The string up is not a registered keyword or absolute URL.
Not having heard back from the author and not finding much on Google search, I'm trying to understrand what rel="up" does, if anything constructive.
Can't find any mention as an official HTML attribute
http://www.w3schools.com/tags/att_link_rel.asp
wondering if it's probably safe to just remove the phrase rel="up"
The Internet Assigned Numbers Authority (IANA) keeps a list of link relationships The latest version is from March 21 2013.
up: Refers to a parent document in a hierarchy of documents.
Unfortunately, despite the fact that this registry was long established, it was decided that HTML5 would not use this registry and would use a Wiki page to list the conforming link types instead.
Up, is listed in a rather insane section marked "dropped without prejudice", which nobody seems to know what to do with, or how to get those link types out of.
It's safe to drop it, but some browsers and browser plugins make use of it. For example, I use a Firefox plugin called "Link Widgets" like this to make use of the link type.
From: http://www.w3.org/MarkUp/html3/dochead.html
REL=Up
When the document forms part of a hierarchy, this link references the immediate parent of the current document.
If this is causing any specific problems or unexpected results, please post your code. Thanks.
I want to use some new HTML5 form attributes and input types on a webpage. Some browsers already support them, others don't and never will. Thats why I want to use Modernizr - and thats were my trouble begins.
To my understanding, Modernizr alone is not a polyfill but a script that can test if the browser is capable of some new HTML5 / CSS3 stuff. If necessary, a polyfill can be loaded which "emulates" these features so they can be used in non-supporting / older browsers. This is correct I guess?
Regarding the testing / loading: Whats the correct or best way to load polyfills with Modernizr?
In the documentation I found this:
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});
but some pages also do it like this:
if (Modernizr.touch){
// bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
// bind to normal click, mousemove, etc
}
Also, how do I actually get to know how these feature detects are called? Something like Modernizr.geolocation surely exists for every feature detect?
In the Modernizr GitHub repository, there are also many user contributed feature detects. How do I implement these into my version of Modernizr? Or is it the best to just use their builder?
In Safari, the HTML5 form validation works, but there is no UI for displaying error messages. Basically, the feature is just half implemented. That's why Modernizr gives a false positive in Safari, like already mentioned here: https://github.com/Modernizr/Modernizr/issues/266
Apparently someone fixed this with such a custom test, but I still don't understand how to use it.1
The two techniques you're seeing are both valid.
In the case of the yep / nope version, this is the ideal way of loading a polyfill that is to be included from a separate file. This doesn't have to be Javascript -- it can also be a CSS file as well.
In the case of the standard JS if() block, this would be more useful if you had a block feature-dependent code in the same JS file that you wanted to switch in or out depending on whether the feature was available.
So both variants have their place.
However, you may also see the if() block option being used to include separate JS files, because the yep / nope syntax was not available in some earlier versions of Modernizr. Yepnope is actually an entirely separate library that has been incorporated into Modernizr in order to make the syntax for loading polyfill files more readable.
Re your question about how to know what the features are that Modernizr can detect, the answer is, of course, in the Modernizr documentation.
Look in the docs (http://modernizr.com/docs/) for the section entitled "Features detected by Modernizr". This has a list of all the features detected, along with the name given to it by Modernizr.
Re the broken feature detect you mentioned -- the ticket you linked to was marked as closed nearly a year ago, and it looks from the notes on the ticket as though the code for the improved test have been added to the main Modernizr code. Make sure you're running the latest version, and double-check whether this is working for you.
Starting with Modernizr v3, using Yepnope through Modernizr.load() has been deprecated. A good alternative is to use jQuery:
if (Modernizr.geolocation){
console.log('match');
} else {
// load polyfill
$.getScript('path/to/script.js')
.done(function() {
console.log('script loaded');
})
.fail(function() {
console.log('script failed to load');
});
}
Hello kind people of the internet,
I've been hacking at this for a while...and have seen several similar postings, but I can't seem to figure this out:
The HTML5 input field validation CSS works in Firefox, Chrome...but alas, not in IE8...and much of my target audience will be using IE8.
...and yes: I'm using Modernizr, and I used Initializr to get the page template and CSS...I'm a bit confused why I can't get things working properly in IE8.
Here's a link to my test page:
Test html5 page
The input field is red before proper entry, then validation simply turns green when input a valid account number, such as:
50011111111
The HTML5 code is as follows:
<label for="account">Account Number: </label>
<input id="account" name="inputAccount"
placeholder="input billing account number"
pattern="/(^500)|^\d{11}"
required
autofocus
type="text"/>
Any suggestions on what is probably a fairly simple thing to fix would be mucho appreciated!
IE just ignors HTML5 elements because it dosen't know about them. From the Modernizr docs
Modernizr runs through a little loop in JavaScript to enable the
various elements from HTML5 (as well as abbr) for styling in Internet
Explorer. Note that this does not mean it suddenly makes IE support
the Audio or Video element, it just means that you can use section
instead of div and style them in CSS.
What this says is that Modernizr will tell IE about the new tags in HTML5 so that you can use CSS on them, but dosen't actually make them do anything. Note too that Modernizr dosen't add default styles for the elements, so they recommend you use an HTML5 CSS reset that makes <section> tags display: block; for example.
With respect to your form validation topek was correct in explaining that Modernizr only detects browser capability, it dosen't actually do anything about it. The proccess behind Modernizr is that you use the built-in yepnope testing feature to see if the user's browser can do 'x' (in this case form validation) and then conditionally and asynchronously load a script or style to "polyfill" (a polite way of saying 'use javascript to mimic native behaviour) for it.
In your case, you will want to use Modernizr.load() to test for Modernizr.input.required and probably Modernizr.input.autofocus too, like this:
//the modernizr conditional load function
Modernizr.load({
//specify the tests, refer to the Modernizr docs for object names
test: Modernizr.input.required && Modernizr.input.placeholder,
//specify what to do if the browser fails the test, can be a function
nope: 'path/to/polyfill/script',
//sometimes you need to run some JS to init that script
complete: function(){ polyfillinitorwhatever(); }
});
And there you go, a pretty stripped-down Modernizr.load. While I find their docs meandering, they actually are very good. Every time I've had a problem and tweeted at Paul Irish, he's sent back a link to the docs where I actually did find my answer upon closer inspection.
Validation is one of the most complex HTML5 features for the browser makers to implement as a standard. While I really like it's simplicity, I've been continuing to use jQuery.validate in all cases except if the user has Chrome or Opera - the FF native validate is weak still. I'd recommend you stick with jQuery for now.
I recently found a new plugin jquery.h5form.
Using this, form validation, like in Opera, will be enabled in all browsers, even IE8.
I think, what you are still missing, is a html5 polyfill for the field validation. You could use for example: http://ericleads.com/h5validate/
More polyfills can be found under: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
IE8 does not support all, if any, HTML5 elements. You need to have an addon for html5 to work. One addon is modernizer
List of browsers with their score/compatibility in HTML5