We need to improve our previous HTML5 project. In our previous project we considered that we will use our internal API to communicate between HTMLs. In this new project we don't consider using our internal API to communicate between HTMLs and all communication should work good using cross domain functionality, html5 storage/cookies.
All playback functionality and playlist functionality should be placed in popup.
So popup will have:
- in first IFRAME player#1 that will have HTML5 player functionality
- in second IFRAME will be playlist#1.
Both IFRAMEs can communicate between using cross domain functionality.
Also we need to have decorative player#2 that will be loaded in browser's toolbar. In FireFox this toolbar can be one, in IE8 this toolbar will be created for every browser TAB instance, in Chrome this toolbar will be created for every browser TAB instance and will be reloaded with reloading TAB. To fix this different behavior in different browsers we moved playback logic to popup and player#2 (loaded in toolbar) will have only "decorative" function. "decorative" functions means that player#2 will show only correct states of player#1 (located in popup) and will send all user actions on decorative player#2 (like click on Play/Pause, Stop etc) to popup that handles playback and playlist.
And as you understand can be a few like decorative player's#2 and every state changed in main popup player#1 should be updated in all "decorative" toolbar player's#2.
To test decorative player you don't need toolbar. You enough to load your player#2 in 3-5 browser TABs.
1. Open in a few browser TABs of decorative player#2
2. In some TAB click Play on any decorative player#2 -> this will open popup with player#1 and playlist#1 and playback will start from popup.
3. Playback states should be updated correct in all decorative player's#2 loaded in browser TABs
4. Close TABs with decorative player#2 will not stop playback
5. Close popup will stop playback