html5のvideoタグで、マウスオーバーで再生

Question

html5のvideoタグで、マウスオーバーで再生、マウスアウトで停止する記述をしたいと思っています。

再生・停止はできたのですが、停止後にposterで指定した画像を表示させたいのですがやり方がわかりません。記述方法を教えて下さい。

よろしくお願いします。

<div class="stage">
	<video class="v" poster="aaa.mp4" loop muted>
		<source src="aaa.mp4">
	</video>
</div>
	

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).on({
    mouseenter:function(){
        $(this).addClass('on');
        $(this).find('.v')[0].currentTime = $(this).find('.v')[0].initialTime || 0;
        $(this).find('.v')[0].play();
    },
    mouseleave:function(){
        $(this).removeClass('on');
        $(this).find('.v')[0].pause();
    }
},'.stage');
</script>

Answer 1

<video>タグのposter属性に画像ではなく動画が指定されているのはミスでしょうか？

それはともかく、マウスが離れた際にposterが表示されるようにするには、.load()メソッドが利用できます。
つまり、

<div class="stage">
    <video class="v" poster="aaa.mp4" loop muted>
        <source src="aaa.mp4">
    </video>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).on({
    mouseenter:function(){
        $(this).addClass('on');
        $(this).find('.v')[0].currentTime = $(this).find('.v')[0].initialTime || 0;
        $(this).find('.v')[0].play();
    },
    mouseleave:function(){
        $(this).removeClass('on');
        // $(this).find('.v')[0].pause();
        $(this).find('.v')[0].load(); // <= !!
    }
},'.stage');
</script>

のようにすればいいです。ただ、これだと毎回動画が最初から始まってしまうので、それが困る場合は、マウスが離れたときの動画のcurrentTimeを保存しておいて、それを次に指定するようにすればいいです。

<div class="stage">
    <video class="v" poster="aaa.mp4" loop muted>
        <source src="aaa.mp4">
    </video>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
var savedTime = $(this).find('.v')[0].initialTime || 0; // <= !!!
$(document).on({
    mouseenter:function(){
        $(this).addClass('on');
        $(this).find('.v')[0].currentTime = savedTime; // <= !!!
        $(this).find('.v')[0].play();
    },
    mouseleave:function(){
        $(this).removeClass('on');
        // $(this).find('.v')[0].pause();
        savedTime = $(this).find('.v')[0].currentTime; // <= !!!
        $(this).find('.v')[0].load(); // <= !!
    }
},'.stage');
</script>

参考： Show HTML5 video poster on pause - Stack Overflow
（「video poster on pause」で検索しました）

Comments

[shiganakunai]

><video>タグのposter属性に画像ではなく動画が指定されているのはミスでしょうか？

これはミスです失礼しました…

カーソルを離した際に画像が表示されました！ありがとうございます。
動画は毎回最初からで良かったのですが、別の方法も教えて下さいまして勉強になります。

Answer 2

poster を img要素にして再生中だけ display: none; するとか。

$( function() {
	$( '.stage' ).each( function() {
		var poster = $( this ).find( '.v' ).attr( 'poster' );
		if ( !poster ) { return; }
		$( '<img src="' + poster + '" class="poster">' ).appendTo( $( this ) )
	} );
} );

.stage {
	height: 300px;
	overflow: hidden;
	position: relative;
}
.poster {
	bottom: 0;
	display: block;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 1;
}
.on > .poster {
	display: none;
}