Few weeks ago, I joined a team for HTML 5 Interactive project for IPST (The Institute for the Promotion of Teaching Science and Technology, Thailand). So I involved a lot of HTML 5 -based technology.
One of them is to provide Window-based executable file that run HTML 5 in native desktop application directly. NW.js seems the best choice for me. Another choice is Electron (known as atom-shell) .
With license problem, NW.js can’t play video file that encoded in H.264 instantly (more info in NW.js’ Wiki). But webM (known as VP8) is good to go.
Here is my HTML5 video element I used to play webM video on NW.js application:
- You have to use your webM (VP8) video, just replace my video’s file path in src property.
- Noted that I show 2 blocks of video to present alternative ways to create HTML5 video player.
<body>
<video controls src="media/trailer.webm" type="video/webm" width="370" height="220">
</video>
<video controls autoplay width="370" height="220">
<source src="media/trailer.webm" type="video/webm" />
</video>
</body>
and here is package.json :
{
"main": "index.html",
"name": "NW.js webM Demo",
"description": "webM demo with HTML5 video on NW.js by Teerasej Jiraphatchandej, [email protected]",
"version": "0.5.0",
"window": {
"title": "webM Demo",
"icon": "link.png",
"toolbar": true,
"frame": true,
"width": 800,
"height": 600,
"position": "mouse",
"min_width": 800,
"min_height": 600
}
}
You can get example project from my Github’s repo here.
And if you already install nw.js via nom just execute following command from the root folder.
nw nextflowWebMDemo
Hope this guide you solve the problem.