Pokki
HTML5 Apps and Games downloaded as desktop apps in a Chrome Single-Site Browser -type framework.
HTML5 Apps and Games downloaded as desktop apps in a Chrome Single-Site Browser -type framework.
1. In Sync Mode - press play on the player and use the space bar or sync button to synchronise the words with the audio.
2. Switch to Playback Mode to see the words synched to the audio. Click on the words to play the audio from that point. Try selecting areas of text.
HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
Flash: mp3, mp4 (AAC/H.264), flv
For cross-browser support, a format must be supplied that works in both HTML5 and Flash.
Optional additional formats may be supplied to increase cross-browser HTML5 support.
Some things to try :
Using Hypertranscripts we can:
Navigate through the media via the text.
Select and play parts of the media by highlighting the relevant parts of the text.
Share parts of the media creating URLs that contain start and end points.
Make our media more discoverable (via search engines)
Make our media more accessible.
More easily visualize the media.
Combine, embed and easily integrate media (using simple tools)
Mozilla’s approach was to expose a very comprehensive low level API, which potentially allows JavaScript developers to create all the functionality of Webkit’s Web Audio API and then some. As a result we get libraries like JSMad cropping up. What does JSMad do? Significantly, it allows you to play MP3s in Firefox*. Is JavaScript fast enough? Apparently so. This was a ‘this changes everything’ moment for me and since then a similar approach has been taken by pdf.js and more recently Broadway.js which decodes H.264 on the fly.
Broadway.js is an open-source library that decodes H.264 in JavaScript by taking advantage of the newer faster JavaScript engines that are built into the latest browsers. This means that in theory a developer can add H.264 playback capability to any modern browser. See also JSMad for MP3 playback and ALAC.js for lossless playback.
HTML5 has entered the online video market, which is both exciting and challenging for developers in the industry. With both the HTML5 specification and the various browser implementations in constant flux, we at LongTail Video spend a signficant amount of time understanding the limitations of the technology, testing playback across various browsers and devices, and optimizing our own products for HTML5 playback.
A background image that fits the entire web page can be more challenging. I’ve learned that a simple graphic with a strong diagonal feel, sized to fit 100% of the page’s height and width, can be a fun and effective background graphic that seems to be a custom fit to the web page size
I've been doing some restructuring of my personal sites and the underlying servers in the past couple of weeks - trying out some new tricks to get similar results with fewer (cheaper) resources, and at the same time learn about some modern web architecture at all levels of the stack.