The range of video formats you can play with nw.js out-of-the-box is very limited. The list of supported codecs
seems quite impressive, but when you start playing videos with nw you quickly realize that hardly any video is actually working. Especially files encoded with H.264, probably the most popular codec, is not supported. nw offers a wiki page explaining how to make H.264 work, but most video files still fail to play. Also, using the techniques described, you will have to license your application as
GPL, in other words you must make your project open-source.
A solution to all of these problems is using WebChimera, a plugin you can use with nw.js.
Download / Demo / tl;dr
You can download the final project from GitHub, the code is quite simple:
WebChimera is a plugin that uses Firebreath to run VLC in your browser—and it works quite well. The best part is, you can use this plugin together with nw.js to fill the gap of unsupported videos and actually play almost all videos in your nw application.
Since WebChimera runs VLC, you will also be able to play almost any audio file, like MP3s, AACs and many more, with it.
Install nw.js and WebChimera
On OS X
- Download nw.js, choose the
64bitversion and extract it.
- Download WebChimera for Mac
- Create a folder called
pluginsin your nw project root.
- From your downloaded WebChimera disk image, copy the file
pluginsfolder you just created.
Unfortunately Linux is not fully supported—yet.
Set up your project
Once you have extracted nw.js and installed WebChimera we can start creating a simple video player. First, create a
package.json in your project root as follows:
On OS X
This contains 3 important settings. Let’s start by looking at
These 2 settings will make nw actually load WebChimera from your plugins directory.
Without these settings the player embedded in your application won’t load. Secondly
app:// protocol will enable nw to load files from your local file system.
This will be important when we implement the interface for the video player using QML, because we will
put the QML code in a separate file that
nw will load from your disk.
Instantiate video player
Create a file called
index.html in your root directory:
nw app. Boom. You already have a video player application that supports all files that are supported by VLC.
Implementing an interface
Interfaces for WebChimera can be written in 2 ways:
- Using QML
complete, we will also learn how to implement an interface using QML. But you can safely skip the QML part if you
Implementing an interface with QML
player.qml to your project’s root directory with the following code:
Then add a param with the name
qmlsrc and the value
player.qml to your
<object> tag like this:
This will add a rounded rectangle at the bottom of your player, click it to pause and unpause the video. This tutorial will teach you how to write QML, but the basics are that QML contains of nested objects, in this case a
VlcVideoSurface containing a
Rectangle containing a
MouseArea. Each object can reference its parent and using the
anchor attributes position itself relative to it. You can find a very nice article explaining the basics of writing QML on WebChimera’s wiki on GitHub: https://github.com/RSATom/WebChimera/wiki/Getting-started-with-QML
If you have just modified your
<object> code, undo your changes. So your
<object> tag should look like this again:
Right after your
<object>, create a div with the id
Add the following CSS to your page:
And at the bottom of your
which should give you the following HTML page
So simply put, we added a
<div> to our markup, styled it with CSS to lay it over our video and are calling the
togglePause() method of the video player when the user clicks on the div. You should see a white, slightly transparent rounded rectangle overlaying the video and pause/unpause it by clicking on the rectangle. This way we can build any interface we want, not different in any way to regular web-development.
As mentioned in the introduction, using the techniques proposed on the nw.js wiki, enabling H.264 support will require you to release your application licensed as GPL too. I.e. you must make your entire project’s source code open-source. Luckily, using WebChimera, you don’t have to do that. WebChimera itself is licensed as LGPL-2.1, but since this is a standalone library, only the library needs to be public. Your code can stay closed using the license that you choose.
WebChimera on GitHub