MP4をHTMLに埋め込み、サムネイル画像をクリックして再生させるには

Question

###分からないこと
今仕事の現場で、ＨＴＭＬ上にＭＰ４形式の動画の埋め込みをする作業をしていまして、動画の埋め込みとサムネイルを埋め込むことはできたのですが、そのサムネイル画像をクリックして動画をスタートさせるにはどのような記述をしたらよろしいのでしょうか？

###書いたソース

<div class="movie_box"> <video src="上田.mp4" controls width="763" height="480" poster="img/movie_thumbnail.png" class="movie"> <source src="上田.webm" type="video/webm"></source> <source src="上田.mp4" type="video/mp4"></source> <embed src="上田.mp4" width="763" height="480" type="video/mp4" autoplay="false" controller="true" pluginspage="http://www.apple.com/jp/quicktime/download/"> </video> </div>

htmlではなくてCSSの追記が必要になってくるのか。。。上司の方もわからないとおっしゃっていたので、もし方法があったら教えてください。よろしくお願い致します。

Answer 1

JavaScriptを使用します。
もしくは、jQueryを使うのが簡単です。

JSのみなら
video要素にonClickをつけて、クリックしたらJS側で再生する処理を書く

jQueryも使うなら
JS側でclass="movie"がクリックされたら再生する処理を書く

こちらを参考にしてみてください。
参考記事

Comments

[NanaKatsura]

ありがとうございます！早速やってみたいと思います＾＾