メインビジュアルVideoタグで動画終了後にもう一度再生するボタンを設置する方法(jQuery)HOMEJavascriptVideoタグで動画終了後にもう一度再生するボタンを設置する方法(jQuery)コーポレートサイトなどでメインビジュアルに動画を入れているサイトを見かけます。一般的にはイメージ映像が多く、常に再生を続けるリピート再生が多いのですが、今回は以下のような動きをvideoタグとCSSとjQueryで実装しました。映像をリピート再生させさせない。映像は流れっぱなし(プレイヤーなし)1回再生が終われば再生ボタンが表示される。クリックでもう一度動画を再生するHTML5のvideo要素、audio要素にはJavaScriptから操作するためのメソッド・プロパティ・イベントが用意されているので、そちらを使用しました。先にDEMOを貼っておきます。<p>動画を再生できる環境ではありません。-->videoタグを「.main_video」で囲って、その中に最後の再生用の「.video-btn」を用意。1em;}動画終了後に「.finished」というclassが付与されるよう、jQueryを記述しているので、再生ボタンが真ん中に表示されるようにCSSを記述しています。再生ボタンは画像でも何でもOKですが、今回はWEBアイコンの「fontawesome」を使用しています。awesome」の使用方法は、下記エントリーで確認するか、ググってください。Awesomeの使用方法まとめiOSで動画をインライン再生する設定をするiOSではvideoタグをタップすると、動画が勝手にフルスクリーンで再生されてしまうので、videoタグに「playsinline」を指定する必要があります。<p>動画を再生できる環境ではありません。</video>動画をオンラインで圧縮してくれるサイトHTML5のvideoタグで動画を表示させる動画の拡張子はmp4を使うのが一般的ですが、動画編集ソフト(PremierePro)とかで動画を普通に書き出すとファイル量がかなり高いです。最低でも10M以下、欲を言えば5M以下ぐらいにした方がサイトの表示速度に負担をかけません。動画圧縮系のアプリはたくさんありますが、オンラインで圧縮するサービスもあるので、アプリをダウンロードするのが、めんどくさい場合はそちらを使います。今回はこちらのオンラインサービスを使いました。圧縮の荒れが結構少なくて、いい感じでした。コメントをキャンセルメールアドレスが公開されることはありません。Memo当ブログの管理人Kc_fuji(け-し-)です。WEB制作会社に務めるサラリーマンです。このブログは、制作の覚え書きとWordpressの実験所として利用しています。PAGEWEB(K)Campus(WEB系キャンパス)は娯楽は少なめ。