Plyr - YouTube/VimeoをサポートしたWebメディアプレーヤ MOONGIFT
動画コンテンツをWeb上で再生するのに使えるのがvideoタグです。しかし素のままではとても使い勝手が悪いです。使いやすくするためには専用のプレーヤライブラリが欲しいでしょう。 今回紹介するPlyrはHTML5のメディアプレイヤーですが、YouTube/Vimeoにも対応しているのがポイントです。 Plyrの使い方 こちらは通常の動画の場合。シンプルですがボタンなどが見やすいデザインです。 オーディオにも対応しています。 YouTubeの場合。デフォルトのデザインの上にかぶせています。 Vimeoでも。こちらは殆ど違和感がありません。 Plyrを使うとYouTube上にあるコンテンツでもサーバ上にある動画でも同じく扱えます。色や機能を統一できればユーザの戸惑いもなくスムーズに使いこなせるでしょう。自社ブランドの色に合わせて使うのが良さそうです。 PlyrはJavaScript製のオープンソ
video-resize - videoタグの大きさをダイナミックに変更
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5で追加されたタグの中で注目度が高いのはvideoタグではないでしょうか。動画は人気コンテンツの一つですし、Flashが終わる中とあってvideoタグに期待がかかっています。 しかしそんなvideoタグはあまり柔軟にできていません。例えばリサイズですが、標準では問題があるのでvideo-resizeを使ってカバーしましょう。 video-resizeの使い方 video-resizeを使っているところです。 大きいときの表示。 高さを変えた時の表示。 video-resizeが便利なのはウィンドウの高さの変化にも追従してくれることです。レスポンシブは幅の変化に合わせますが、video-resizeは高さにも関係してきます。そして、なるべく全体が見られるような状態を維持してく
FacebookライクなGIFアニメーションプレビュー「Facebook Like GIF Preview Using jQuery」
TOP > javascript , WebDesign > FacebookライクなGIFアニメーションプレビュー「Facebook Like GIF Preview Using jQuery」 動画はトラフィックを取られすぎてなかなか展開はできないけどなんとかしたいという思いから、動画部分をGIFアニメーションで代替して利用するというサイトを最近では見かけます。今日紹介するのはFacebookライクなインターフェイスでGIFアニメーションプレビューを実装できる「Facebook Like GIF Preview Using jQuery」です。 こちらはjQueryベースで制作されており、jQueryとライブラリ、CSSを読みこせて、HTMLとjsを追記するという形で、比較的簡単に実装が可能です。 詳しくは以下 GIFのマークをクリックするとGIFアニメーションがスタートし、再
Demos for Acorn Media Player, Accessible and customizable HTML5 media player
Defaults "Tears of Steel" was realized with crowd-funding by users of the open source 3D creation tool Blender. Target was to improve and test a complete open and free pipeline for visual effects in film - and to make a compelling sci-fi film in Amsterdam, the Netherlands. (CC) Blender Foundation - http://www.tearsofsteel.org P.T.Burnem's track "Gypsy Heart Rock" from the "Paper Cranes" album. Thi
Youtube動画を自由自在に操れるjQueryプラグイン「Red Ytube」:phpspot開発日誌
Red Plugin Youtube動画を自由自在に操れるjQueryプラグイン「Red Ytube」 YoutubeのAPIを使って独自の再生ボタンを作ったり、再生時間なんかを表示させたり、埋め込み動画をその場でリサイズしたりすることが可能です 独自のテキストベースの再生・停止ボタン 現在の動画時間のリアルタイム表示 右下のつまみをドラッグ＆ドロップで動画をリサイズ（これは便利） APIを調べるのが億劫でも比較的簡単に実装できそうです 関連エントリ APIを使わずにYoutube動画のサムネイルを得る方法 Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」
「ヘルプ」における動画活用のポイント (ユーザビリティ実践メモ)
最近は、動画の活用をお考えのウェブマスターの方も多いのではないでしょうか？ 動画は表現が豊かでイメージがつかみやすいので様々なところで役に立ってくれます。 今回は特に「FAQ・ヘルプ」において動画を活用する場合のポイントについて解説します。 ヘルプは基本的にユーザが抱いている疑問や不安を解消するという役割があります。 顕在化している疑問や不安をヘルプで探しているユーザは、急いで自分の課題を解決したいと思っているため、ぱっと見で理解できる「文章＋画像」による説明を好みやすく、じっと動画を見てもらうことは難しいのが一般的です。 そのため、いつでも動画を使えばいいというわけではなく、適切なケースを選んで、動画を利用することが重要です。 ヘルプで動画を活用するべきなのは、 動画でなければ伝えられない「動き」が大事な場合 複雑なステップの操作 など、文章や静止画だけでは伝わりにくい情報を伝える場合で
YouTubeが教える6つの「視聴者を増やす工夫と収益増加のヒント(基本編)」
YouTubeのパートナープログラム（YouTubeに広告を表示して収益を上げるアレ）を使っているユーザー向けにYouTubeパートナーチームが「視聴者を増やす工夫と収益増加のヒント」というスライドを公開しました。 スライドの内容は割と実直な内容ですが、すべて実行すれば確かに効果が出そうな感じで、まさに基本的な内容ながら割とツボを押さえた中身になっており、非所にわかりやすく、YouTube以外のその他のプロモーションにも応用できそうな感じです。 スライドの詳細は以下から。 視聴者を増やす工夫と収益増加のヒント（基本編） - YouTube パートナーステーション まずは「必ず設定してほしい6つのこと」から。 1.動画タイトル・説明・タグを充実させる。 2.チャンネルタイトル・タグを充実させる。 3.動画ページバナーを設定する。 4.コメント・コメントの投稿・評価を許可する。 5.動画埋め込
jQuery Youtube Player
The jQuery Youtube Player plugin builds a custom youtube video player, toolbar and playlist area. Examples: Basic Advanced Embedded Multiple Playlists Custom Playlist Positioning Custom toolbar buttons Themes Userguide Userguide Issues/Feature requests If you notice the plugin is working as expecting, or would like to request new features, please use the issue tracker. Tested on: FF3.6; IE 6, 7 an
動画で情報を提供する際の注意点 (ユーザビリティ実践メモ)
サイト内で動画を使って情報を提供する手法には、 ・ 情報をより具体的に伝えることができる ・ 表現が豊かになり、より強いインパクトを与えることができる といったメリットがあり、主にニュースやエンターテイメント性の高いコンテンツの提供に適しています。 本日はこの「動画での情報提供」を行う際に配慮すべき点について整理しました。 １．テキスト情報をあわせて用意する読み込みに時間がかかる動画コンテンツは、再生が開始されるまでにどうしてもユーザを待たせてしまいます。ネットブックやスマートフォンがますます普及すれば、このケースはより多くなるでしょう。 テキストや画像によるキャプションや補足説明など、動画以外の情報もあわせて用意することで、動画再生までの待ち時間にユーザの興味がそがれないよう配慮することが重要です。 ２．最初の数秒で、ユーザの心を捉える必要のない動画を長時間見せられることはユーザにとって
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Appealing | Mobile UI Animations
Youtube動画にマウスホバーでSNSへのシェアボタンを表示させる