Quality Assurance Testing with TestSwarm and QUnit

Kaltura’s HTML5 Media Library is continuously tested upon each commit to the svn repository.
Testing is performed on Internet Explorer 7 through 9, Firefox 3.6 and the latest Firefox, the latest Google Chrome, Android 2.x, 3.x, and 4.x, the latest Safari, latest iPhone, and the latest iPad running on a private virtualization cluster.
Each revision to the library triggers a job submission to our TestSwarm server. Test results can be viewed at http://html5video.org/testswarm/user/html5video .

Please visit the html5video.org wiki for the most recent version of this document.

Running Tests

TestSwarm is a simple php application that anyone may visit with their browser and their browser will be added to the testing swarm, running any tests in the testing queue.
To add your browser to the testswarm, visit http://html5video.org/testswarm/run/html5video .
Once your browser loads the page, TestSwarm will continually run tests in an iFrame testrunner until the browser is closed.

Interpreting Test Results

The Kaltura HTML5 Video Library’s test results are stored at http://html5video.org/testswarm/user/html5video/ where testswarm provides a way to drill into test results and view errors and passes from test runs.
To open a specific test job, click on the Name of the job:
And this will open the job report for this commit.
Clicking on the svn revision number will take you to the ChiliProject repository browser where you may view the difference to the library that this revision contains. Clicking on the Name of a test will run the test in your browser, and clicking on a green, red, or black square will take you to the result page for specific browser and test combinations:

Writing Tests

Testing with QUnit

QUnit is a testing framework for JavaScript that jQuery uses to perform regression and unit testing on the jQuery library.
From the QUnit website:

QUnit is a powerful, easy-to-use, JavaScript test suite. It’s used by the jQuery project to test its code and plugins but is capable of testing any generic JavaScript code (and even capable of testing JavaScript code on the server-side).

QUnit runs any JavaScript and adds assertions that will pass or fail according to weather the code being tested operates as expected.
The following is a simple example with two tests.
test( "a basic test example", function() {
        ok( true, "this test is fine" );
        var value = "hello";
        equal( value, "hello", "We expect value to be hello" );
})
Here is the full source code for a web page that includes the previous tests and the appropriate javascript includes:
<!DOCTYPE html>
<html>
<head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
        <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
        <script>
                $(document).ready(function(){
                        test("a basic test example", function() {
                                ok( true, "this test is fine" );
                                var value = "hello";
                                equal( value, "hello", "We expect value to be hello" );
                        });
                });
        </script>
</head>
<body>
        <h1 id="qunit-header">QUnit example</h1>
        <h2 id="qunit-banner"></h2>
        <div id="qunit-testrunner-toolbar"></div>
        <h2 id="qunit-userAgent"></h2>
        <ol id="qunit-tests"></ol>
        <div id="qunit-fixture">test markup, will be hidden</div>
</body>
</html>
Running this test will result in the following:

Automatic Test Selection

Each plugin that is stored in the svn repository lives in its own folder within the “modules” folder like http://www.kaltura.org/kalorg/html5video/trunk/mwEmbed/modules/KalturaSupport
Within the plugin folder there is a folder called tests that contains html files. If the file ends with .qunit.html then that file will be added to the testing queue upon each update to the svn repository.

Kaltura QUnit Implementation

Kaltura has built upon QUnit to test its HTML5 video library and made the creation of tests very straightforward. Merely include the qunit-bootstrap.js file and the mwEmbedLoader.php in your demonstration or testing page, and then add your tests in a JavaScript <script> block in a function called jsKalturaPlayerTest. The final step is adding the qunit-kaltura-bootstrap.js below any mw.setConfig and jsCallbackReady directives necessary to setup players and plugins for testing.
<script type="text/javascript" src="../../../tests/qunit/qunit-bootstrap.js"></script>
<script type="text/javascript" src="../../../mwEmbedLoader.php?debug=true"></script>
<script type="text/javascript">	
function jsKalturaPlayerTest( videoId ){
 
	var $iframe = $('#' + videoId + '_ifp').contents();
	var iframeContext = window.frames['kaltura_player_ifp'];
 
	test( "Iframe in DOM", function() {
		ok( $('#' + videoId + '_ifp').length , 'iframe found' );
		equal( typeof iframeContext, 'object', "iframe JavaScript context available" );
	});
}
</script>
<!-- qunit-kaltura must come after qunit-bootstrap.js and after mwEmbedLoader.php and after any jsCallbackReady stuff-->
<script type="text/javascript" src="resources/qunit-kaltura-bootstrap.js"></script>
Please view the source for the Basic Player Test and the tests folder for further examples.
Posted in Uncategorized | Leave a comment

Kaltura HTML5 Media Library v1.5 Released

We’re happy to announce the deployment of version 1.5 of the Kaltura HTML5 Video Library. This  release includes a number of enhancements in the playlist handler, the addition of QUnit tests for many player features and many additional plugins. This blog post will give you a high level overview of all the changes. For more in-depth coverage follow the html5video.org wiki.

The Kaltura library update has been deployed to both .org and .com to enable html5 links provided to you by the KMC and to the html5.kaltura.org/js location. Its important that if you’re a Kaltura customer you contact your project manager or Kaltura support to update your script includes to the .com hosted version of the library. The .org location will continue to host the latest version of the library and is a good way to play around with new features, but is less recommend for production sites.

Continue reading for the full release notes on this Kaltura html5 video library update:

Continue reading

Posted in Library Release | Tagged | Leave a comment

Adobe to forgo Flash plug-in for mobile devices

Our future work with Flash on mobile devices will be focused on enabling Flash developers to package native apps with Adobe AIR for all the major app stores.  We will no longer continue to develop Flash Player in the browser to work with new mobile device configurations (chipset, browser, OS version, etc.) following the upcoming release of Flash Player 11.1 for Android and BlackBerry PlayBook.”

via jvaughan: Adobe to forgo Flash plug-in for mobile devices.

Posted in Flash, html5 | Leave a comment

The Open Video Conference 2011: Getting Things Done

The Open Video Conference is an annual event that brings together video creators, intellectual property scholars, and developers for a weekend of creating, remixing, and hacking. The conference was combined with the Foundations of Open Media Software workshop which attracted the developers of Opera, Firefox, and Webkit (Perhaps Microsoft should keep an eye out for next year’s conference?).

2011’s OVC departed from last year’s monolithic format of session on top of session, opting for a smaller crowd with tracks devoted to getting things done. Around 400 of us were privileged to attend, and we were able to shift between the creative, copyright, and development tracks as needed to effectively share knowledge between these disparate but related fields–and did we get things done!

This post focuses on the development sessions at #ovc2011.
Stay tuned to our news feed for information more attuned to video
creators.

Popcorn.js

Popcorn.js was the focus of a few working groups. Over the past year Popcorn has graduated from Bocoup’s open source incubator and with the assistance of Mozilla it has become a project in its own right within the Mozilla Web Made Movies initiative.

Fork Popcorn.js on GitHub.

Popcorn Maker

Butter, the Popcorn authoring tool is being rewritten by Bobby Richter from the ground up and rebranded as the Popcorn Maker.

The Popcorn Maker expands on Butter to provide multitrack timeline editing for composing Google Maps, Wikipedia, Twitter, and other Popcorn plugin data assigned to html divs.

Try it now, or Fork the Popcorn Maker on GitHub.

Remixer

Jonathan McIntosh, Zohar Babin, and Boaz Sender began the conference with a development session geared toward making an HTML5/popcorn.js video version of the Gendered Advertising Remixer. McIntosh’s advertisement remixer uses the regimented timing of children’s toy advertisements to encourage viewers to swap audio and video from male and female ads–showcasing how gender is taught via mass media. Try the demo for yourself, and fork the project on GitHub to reuse it for your own projects.

Popcorn Kernel

Rick Waldron, Cole Gillespie, Drew Cimino, and I made use of the popcorn plugin sprint to begin outlining a simple development server for developers and content creators to quickly get up and running with the Node.js, web sockets, Popcorn Maker, media storage, and JSON metadata storage for popcorn scripts and plugin data.

Join the discussion on freenode channel #popcorn-kernel

WebRTC

Developers from CISCO, Mozilla, and Google put together an exciting demo and brainstorming session session for WebRTC (Real Time Communications). WebRTC aims to provide streaming access for data transfer between browsers with no server required–all communications are transferred between peers. Check the slides from the presentation

WebRTC has been in development for a year and it is expected to land in development versions of Opera, Mozilla, and Webkit by the end of September.

In order to begin developing with WebRTC, you need only use the Javascript API, but the WebRTC spec is open source, so you can integrate the protocol into any application.

Advanced Media Stream Manipulation in HTML5

There are many use cases for quickly switching video streams within a single video element: adaptive streaming requires that transitions from one bitrate stream to another be seamless, video editing within the browser will require the same, presenting transformative video in a gamified news paradigm, and content protection will be able to build on stream switching to allow securely transmuxing encrypted streams.

A few selected notes from the Adaptive Streaming Session:

  • Netflix is implementing the MPEGLA Dynamic Adaptive Streaming over HTTP (DASH) manifest format (download the draft spec here) for adaptive streaming and content protection.

    • multiple tracks / accessibility
    • trick modes (e.g. deal with fast forward by dropping to lower framerate)
    • 3D, multi-view, scalable video
    • protected content
  • webkitSourceAppend is a recenlty introduced addition to Chromium/Webkit that provides a similar funtionality to the video tag that Flash allows with it’s AppendBytes and NetStream.

    • Will require stream transmuxing to be handled by Javascript
    • Performing complex stream manipulation in Javascript before streaming the data to a video tag may use too much battery for mobile devices.
    • This implementation is weeks old and needs better error handling as well as extensive testing.

read more …

webGL

webGL has quickly become the preferred method of adding complex video filters to the video and canvas elements on top of its basic usage as a three dimensional modeling and gaming environment within the browser.

The reason for using webGL for advanced video processing is that it is the best way to take advantage of multicore graphical processing units on mobile and tablet devices. As in the case of providing adaptive streaming, being able to harness the incredible throughput of the GPU rather than the central processing unit saves clients battery power (as we move forward the CPU becomes used more for scheduling GPU rendering and processing than for performing complex calculations). And using the GPU to combine and render video elements saves video broadcasters bandwidth and provides viewers with a malleable viewing environment.

Check out these great demos in Firefox:

  • Seriously.js is a framework for applying video filters to video tags and and canvas element. Fork the project on GitHub.
  • No Comply is a demo of using video, the audio api, and webGL to provide an interactive music video with video game elements that the viewer controls.

And in addition to Seriously.js, check out these libraries for making use of webGL now:

  • THREE.js – Lightweight Javascript 3D engine “for dummies”
  • CubicVR.js – Javascript 3D engine (with physics!)

In Closing

OVC was a massive meeting of the minds for open video. A venue to tackle issues that can’t readably be addressed any other way. Google had a much more active showing this year, and it was incredibly valuable to have representatives from almost all the major browsers in the same room. More importantly innovative new features for video on the web could be vetted across not just other browser makers, but video platform providers, javascript hackers and innovative technology artists. This enabled an holistic exploration of features to address a wide range of open video needs.

It was very powerful to see the creative exchange of ideas for future web video applications taking place between OVC participants on one side of the room, at the same time that the technical, legal and political foundations for enabling these application was actively being built on the other. This fusion of creativity that takes place at OVC will continue to enable truly magical experiences on the web; from the mash up projects built at conference, to dreaming up web video applications of the future.

The task at hand for the Open Video Alliance its nothing short of ensuring web video as a medium continues its transcendence from the constrained heritage of TV and Film. With this conference we can see participants continue to rise to the challenge, making really cool experiences you won’t see on TV!

All session notes from the conference are conveniently stored on OpenEtherPad.org.

Posted in #ovc11, html5, Open Video Alliance, Open Video Conference, popcorn.js, webGL, webRTC | Leave a comment

Welcome to the New HTML5 Video

Welcome to the new html5video.org, a site dedicated to all things html5 video. Now with more Community!

New Features for the Open Video Community:

  1. Our Wiki is open to everyone, we are collecting all of our html5 video knowledge there as well as our own library usage documentation.
  2. This Blog, the one you are reading right now, will be updated weekly with news about our own library features and analysis of html5 video programming methadologies.
  3. Our News feed will continue to bring you the latest breaking news about html5, javascript, openvideo, and video distribution best practices.
  4. HTML5 Players Compared We have installed demonstrations of over 20 HTML5 video playback libraries to assist you in finding the perfect HTML5 video solution for your next project (if you are a library developer, please email your public key to andrew.davis@kaltura.com for access to our git repo to make sure we’ve got your project and are displaying it exactly like you would).

2012 is going to be a booming year for HTML5 video. Next month, the Open Video Conference continues its alliance with the Foundations of Open Media Software (FOMS) by including the Open Media Developers Track in the conferences’ hands on, getting things done format.

New Features of the Kaltura HTML5 Media Library:

  1. Continuous Testing with TestSwarm
  2. TTML timed text support
  3. Tighter integration with the Kaltura KDP Flash Player javascript api
  4. Repository browsing with redmine

To support the growing number of html5 libaray features we have deployed TestSwarm to continuously test the html5 library on every commit. This enables us to transition the html5 library into a continuous integration development model where each new feature includes a test case and is tested for regression on every svn commit. TestSwarm was written by John Resig, and enables easy distributed testing across many browsers and devices. TestSwarm integrates with QUnit test framework and allows us to ensure features are working as we make library updates. Point your browsers and mobile devices to our TestSwarm runner to help us test the library and see the tests run for yourself.

Coming Soon:

  1. An HTML5 Video Playground for Demonstrations and Experiments
  2. A guide to Kaltura HTML5 module integration with Popcorn.js
Posted in Home | 4 Comments