videoで動画を再生している時に、イベントを取得する方法。

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

<?php $movieUrl = get_template_directory_uri() .'/library/movies/'; ?>
<div class="main-header">
	<video preload="auto" autoplay="autoplay" muted="muted" loop="loop" poster="<?php echo $imageUrl; ?>header-top.jpg" >
	<source src="<?php echo $movieUrl; ?>header-top.mp4" />
	</video>
</div>

<?php $movieUrl = get_template_directory_uri() .'/library/movies/'; ?>

<video preload="auto" autoplay="autoplay" muted="muted" loop="loop" poster="<?php echo $imageUrl; ?>header-top.jpg" >

<source src="<?php echo $movieUrl; ?>header-top.mp4" />

</video>

</div>

で、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"); }); 
});

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に参考画像を設定しているのですが、そのサイズも画面いっぱいにできんかったり、再生ボタンの位置も真ん中に来なかったり、いろいろ面倒。