サイトでおしゃれに動画再生！オリジナルUIの全画面動画を実装！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、制作部デザイナーのぺちこです。 近頃動画を使ったサイト制作に関わらせていただく機会に恵まれておりますが、 お恥ずかしながらvideo実装をしたことがなかったので、 ひたすら勉強三昧でした。 背景に動画を使ったサイトも、今ではだいぶん主流になってきた印象ですが、 動画を1つのコンテンツとして、長めにしっかりと載せているサイトも増えてきましたね！ 動画を大事なコンテンツの一部とすると、 YouTubeやVimeoで簡易的に載せるだけではどうしても物足りず…。 せっかくなので<video>タグを使用してオリジナルのコントローラーやシークバーを作ってしまおう！というのが今回の記事の内容です。 では早速行きましょう！ オリジナルUIの全画面動画を<video>で実装する方法 JSを使用すればvideoをがっつりコントロールできるのですが、 これがまた調べてもスクリプトが出てくるばかりで、
BigVideo.js
デモページ デモは左のメニューから、動画を変更して再生できます。 BigVideo.jsの使い方 外部ファイル BigVideo.jsはjQuery, jQuery UIと、動画再生に「video.js」を利用しています。これら全てを外部ファイルとして記述します。 <!-- BigVideo Dependencies --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/jquery-ui-1.8.22.custom.min.js"></script> <script src="js/jquery.imagesloaded.min.js"></script> <script src="http://vjs.zencdn.net/c/vide
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
