Video/audio continues playing when in "hidden" column (reflow pagination) or scroll area about readium-shared-js

[danielweck]

To reproduce (tested with Chrome and Safari OSX):

(1) Download this EPUB from the official Google Code samples:
https://code.google.com/p/epub-samples/downloads/detail?name=cc-shared-culture-20120130.epub

(2) open p60.xhtml and copy/paste the following HTML fragment into the content, lower down in the markup (just so that the video gets displayed in a CSS column / page other than the first visible spread):

<epub:trigger ev:observer="pause" ev:event="click" action="pause" ref="video1"/>
<epub:trigger ev:observer="resume" ev:event="click" action="resume" ref="video1"/>
<video id="video1" autoplayxx="autoplay" controls="controls">
<source src="../video/shared-culture.mp4" type="video/mp4"/>
<source src="../video/shared-culture.webm" type="video/webm"/>
</video>
<p>
<button class="button" id="resume">play</button>
<button class="button" id="pause">pause</button>
</p>

Note that the epub:triggers are here to enable mouse/keyboard interaction with the video controls...that's because of another WebKit bug with CSS Columns :(
See this separate issue:
#54

(3) start the video, then move to the previous/next page. Notice how the video continues playing "in the background".

(4) Same issue with the scroll view? When the video goes out of sight, should it pause automatically? Should it pause automatically only when the visible iframe is different that the video's own iframe? (remember, the scroll view stacks multiple iframes vertically)

[danielweck]

Suggestion: pause all videos (and audios) at UPDATE_PAGINATION event.
Scroll view: multiple spine items loaded at the same time, must iterate through each XHTML document. What about manual scrolling? (no page turn, just arbitrary scroll)