Subtitles in HTML5 Video, CORS, FileAPI Writer and other new items in the new preview of Internet Explorer 10

    Main

    Yesterday , a new preview version of Internet Explorer 10 was introduced , in which developers added a significant number of new features. Among them:
    • support for subtitles in HTML5 Video (several languages ​​at once);
    • Added support for CORS ( cross origin resource sharing ) for secure cross-domain queries;
    • Added support for File API: Writer for working in a browser with large binary objects (files, blobs);
    • Added support for JavaScript typed arrays for efficient storage and manipulation of typed data;
    • added support for CSS user select properties for the ability to set blocks on the page that are available for selection by the user;
    • improvements in CSS3 Positioned Floats, Flexbox, Grid, support for Web Worker Thread Pooling, improved support for XHR2.
    In addition, the Developer Center was updated, several new functional demos were created, and over a hundred new quality tests for implementing web standards were added. All this is described below.

    As always, you can download the new preview version of Internet Explorer at http://ie.microsoft.com/testdrive/ (the new preview can be installed on the Windows 8 Developer Preview). There you will find demos, tests, technical information and useful links. Russian-speaking developers will benefit from a special section on MSDN . In addition, a localized guide is available for all new web standards implemented in Internet Explorer 10 (awaiting update).

    Subtitle support in HTML5 Video


    So, if you wanted to use HTML5 Video along with subtitles, then in IE10 PP4 you can do this using a special link definition or even links to caption files:


    I am pleased to announce that Internet Explorer 10 supports two TTML and WebVTT subtitle formats that you can overlay on HTML5 Video. As a result, you will get the following presentation of the video player:

    image

    Using the special button of the player you can control the subtitles: turn them off or select a specific language. To demonstrate the new functionality, welcome to the special page with the IE10 Video Captioning demo . For demo subtitles, your browser must support the HTML5 element.

    CORS Support


    Support for Cross-Origin Resource Sharing and improvements in XHR support enable Internet Explorer 10 to implement secure cross-domain data exchange based on web standards. These capabilities are best demonstrated by the Cross-Site Upload functional demo , which uses a bunch of web standards CORS, XMLHttpRequest, Progress Events, Progress Control and File API implemented in IE10 to implement batch upload of large files to the server with validation and restrictions on the client side. Try it yourself.

    demo2



    Support for FileAPI Writer and JavaScript typed arrays


    Internet Explorer 10 supports some parts of the FileAPI standard from the first versions. In a new preview, support was added for part of the FileAPI Writer standard , which allows you to work with large binary data (blobs, files) directly in the browser.

    Convenience to work with this kind of data is also facilitated by the support of the JavaScript typed arrays specification , added in a new preview.

    To demonstrate the new features that developers receive from these standards, an excellent functional demo was created that combined the use of many new technologies at once: XHR2, JavaScript Typed Arrays, File API Writer. In the Binary File Inspector demoyou can use the browser as an inspector of binary files: blobs, pictures, even videos (example in the screenshot). Try the demo yourself, it requires IE 10+, Chrome 12+ or Firefox 7+ browsers to function. Another demo shows how to work with blob objects in a browser using the example of a small music music editor :

    demo6





    demo1

    CSS user select support


    The CSS properties -ms-user-select allow developers to restrict or explicitly specify blocks on the page that the user can select or which are not available for selection. For example, it is stated through CSS rules below that .comment elements can be selected by the user, but the content of the blog is not.

    .comment { 
        -ms-user-select:element; 
        -moz-user-select:text; 
        -webkit-user-select:text; 
    } 
    #blog { 
        -ms-user-select:none; 
        -moz-user-select:-moz-none; 
        -webkit-user-select:none; 
    }
    

    To demonstrate the operation of these properties, visit the User-Select functional demo , which gives examples of new functionality using code examples.

    demo5

    Advanced Hit Testing APIs


    Another demo of Advanced Hit Testing APIs shows how to work with the new msElement s FromPoint () and msElement sFromRect () API , which allows you to conveniently work with objects and their selection in the browser. On the example of pictures, an idea is given of how you can select an object or several objects and manipulate them: rotate around the axis, move, scale.

    demo3

    New tests for the quality of implementation of web standards


    Obviously, the claimed support for the web standard may have different quality of this support. Therefore, it is important to understand how well these or those web standards are implemented in browsers. For this reason, after every innovation in Internet Explorer, browser developers write test suites for the quality of implementation of new standards.

    With the release of a new preview of Internet Explorer 10 PP4, developers have proposed over 110 new tests covering new features added to the browser, for example, HTML5 support. To date, there are already about 8,000 different tests that are available to everyone on the IE Testing Center website . Anyone can test their browser for certain aspects of standards support.

    tests2



    Developer Center and Documentation Update


    With the release of a new preview of Internet Explorer 10, the appearance of the IE Developer Guide has been updated . Now all materials are conveniently grouped by topic. The center contains complete information on all the innovations and standards implemented in Internet Explorer.

    Let me remind you that Russian-speaking developers will find the special section on MSDN useful . In addition, a localized guide is available for all new web standards implemented in Internet Explorer 10 (awaiting update).

    Also popular now: