テクニカルノート

たとえば、こんなかんじでvideo タグが埋め込まれているとします。

で、JQueryでイベントを取得するときはこんな感じ。

jQuery(function( $ ) {
    $('.main-header video').on('timeupdate', function(e) { alert("timeupdate"); }); 
    $('.main-header video').on('load', function(e) { alert("load"); }); 
    $('.main-header video').on('play', function(e) { alert("play"); }); 
    $('.main-header video').on('playing', function(e) { alert("playing"); }); 
});

参考になった、サイトさん。
→http://uguisu.skr.jp/html/html5_video_audio.html

でも、videoはブラウザによって、挙動がまちまちっぽい。
詳しく調べてくださったサイトさん。
→http://takazudo.github.io/blog/entry/2013-02-06-videoaudio.html

動画が再生されるまで、あるいはスマホ対策で、posterに参考画像を設定しているのですが、そのサイズも画面いっぱいにできんかったり、再生ボタンの位置も真ん中に来なかったり、いろいろ面倒。