videoにcontrolsとonclick=”this.play();”を合わせて付けるとFirefoxで再生できない

タイトルの通りですが、videoタグにcontrolsとonclick=”this.play();”を合わせて設定するとFirefoxで再生できないようだったので、対応方法をメモしておきます。

サンプルコード

controlsなしでvideoを設置する場合、onclick=”this.play();”を設定しないとクリックしても動画が再生されません。

HTML

<p>onclick="this.play();"なし</p>
<video poster="thumb.jpg" preload="none" width="640" height="360">
	<source src="movie.mp4" type="video/mp4">
</video>

<p>onclick="this.play();"あり</p>
<video poster="thumb.jpg" preload="none" onclick="this.play();" width="640" height="360">
	<source src="movie.mp4" type="video/mp4">
</video>

controlsなしの場合のデモページ
　

controlsありでサムネイルクリック時に再生させたい場合、上記と同じくonclick=”this.play();”を設定する必要がありますが、Firefoxだと再生されませんでした。

HTML

<p>onclick="this.play();"なし</p>
<video controls poster="thumb.jpg" preload="none" width="640" height="360">
	<source src="movie.mp4" type="video/mp4">
</video>

<p>onclick="this.play();"あり</p>
<video controls poster="thumb.jpg" preload="none" onclick="this.play();" width="640" height="360">
	<source src="movie.mp4" type="video/mp4">
</video>

controlsありの場合のデモページ
　

対応方法

Firefoxではcontrolsありの場合、サムネイルクリックでも動画再生ができるため、return false;でブラウザでの再生をキャンセルする必要があるようです。

HTML

<video controls poster="thumb.jpg" preload="none" onclick="this.play();return false;" width="640" height="360">
	<source src="movie.mp4" type="video/mp4">
</video>

Firefox対応後のデモページ
　

【参考サイト】

• videoタグでonclick=”this.play()”つけるとfirefoxで動かなくなる : 森のコーディング