日本語以外の言語のYouTube動画を再生する時、字幕を表示したり自動字幕翻訳機能を使用したりすることができますが、これだと字幕を読み続ける必要があります。しかし、拡張機能の「CaptionSpeaker」を使えば字幕を自動で翻訳して読み上げてくれるということで、実際にどんな感じになるのか使ってみました。 CaptionSpeaker - Chrome ウェブストア https://chrome.google.com/webstore/detail/captionspeaker/infafaffjndfcflcoemolnggghgoodce GitHub - limura/CaptionSpeaker: CaptionSpeaker は youtube で表示される字幕を発話させる事で耳から聞くことができるようにする chrome extension です。 https://github
サイトにYoutubeの埋め込み動画を乗っける方法です。 Vue.js上でやっていくので、コンポーネント化して汎用的に使えるような実装を目標にします。 Youtubeの埋め込み情報を取得する 動画上で右クリック → "埋め込みコードをコピー" で取得できます。 下のようなコードが取得できます。これを任意の場所に張り付けるだけです。簡単でしょ？ <iframe width="1280" height="720" src="https://www.youtube.com/embed/jAH3MEsh3aU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" all
世には幾多の人気webサービスがございますが、いざユーザーとして使ってみると、「ココがこーだったらもっと面白いのになー。。。」とか妄想してしまうのがweb屋のサガってもんです。 とはいえイチから類似サービスを構築するのは気が引けるし、構築ボリュームも遊びで手を出せるような規模じゃなかったり。 既存の人気webサービスを基盤に、自分のアイディアを組み込みたい！でも車輪の再開発は気が進まない！そんな時こそ「クローンスクリプト」の出番です。 今回はそんなクローンスクリプトの中でも、個人的趣向から「PHP製」にこだわって探し出しました。その数なんと16サイト38種！ 機能の実装やアルゴリズムの勉強から、オリジナルwebサービスのベースにまで、このクローンスクリプト集をご活用いただければ幸いです♪ ご紹介するクローンスクリプト使用時の注意 本エントリーにてご紹介させていただくクローンスクリプトに関し
Google Mapをはじめ、YouTube, Vimeo, Vine, TEDなどの動画、SpotifyやSoundCloudなどの音楽、GitHub, CodePen, JS Binなどのコードなど、さまざまなメディアをWebページに簡単に埋め込むことができるスクリプトを紹介します。 :heart:（ハート）や:smile:（スマイル）などの絵文字を使ったテキストを埋め込めます。 リンクを検出して、bit.ly, buff.ly などの短縮URLに置き換えます。 Twitterのツイートを埋め込みます。 YouTubeやVimeoの動画をAPIから取得して埋め込みます。 dailymotion, vine, TEDなどの動画共有サービスもサポート。 SpotifyやSoundCloudなどの音楽サービスもサポート。 HTML5プレイヤーにサポートされた音楽ファイル（.wav, .mp3
デモ：Googleマップ Googleマップもサポート。 Embed.jsの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.css"/> <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.embed.js"></script> </head> Twitterを埋め込む時には「widgets.js」、コードのシンタックスハイライトには「highlight.min.js」を使用します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.
2015-02-02 『Listband』ではじめる新しい音楽の遊び方 音楽 スポンサーリンク 前から注目してました田沢さん（@tazawa_naoto）が作った新しいウェブサービス。 『Listband』 Listband（リストバンド）はYouTubeの動画でアルバムが作成できるWEBサイトです。 アルバム１枚あたりの収録可能時間は実際のCDと同様に74分42秒。 すべての機能を無料でご利用いただけます。 日本ではかな～り先進的な試みです。 海外ではSpotifyなどのストリーミングサービスとFecebookなどを通じて「プレイリストを共有」する遊びが流行っているんです。 昔、やりませんでした？ テープで、MDで、CD-Rで「俺的ベスト」を作って友人にあげたりとか。 その現代版が『Listband』なわけですね！ 既に多くの方が利用しているみたいです。↓ 企業家で有名な家入一真さんもい
動画をページいっぱいの背景として使用するのは、ここ数年人気の高いテクニック。 その方法はいくつかありますが、今回はレスポンシブ対応、動画の上にコンテンツを配置しスクロールでカーテンのように引き上げるページを実装するチュートリアルを紹介します。 HTML5のvideo要素で自サーバーの動画を配置するのではなく、YouTubeの動画を使うので、サーバーのレスポンスを気にする必要もありません。 デモページ：下までスクロール 実装 使用するリソース チュートリアルにあたり、下記のリソースを使用しています。 jQuery jquery.mb.YTPlayer YouTubeの動画を背景として表示するjQueryのプラグイン フォント：Google Fonts (Raleway, Lato) アイコン：Font Awesome 背景に使う動画の注意点 背景に使う動画は、下記の点に注意してください。 動
Google Chrome、Internet Explorer 11、Safari 8、Firefoxのベータ版ではHTML5ベースの動画プレイヤーで動画が再生されるようになっているとのこと。 HTML5が「Adaptive Bitrate（ABR）」をサポート YouTubeはHTML5の動画プレイヤーは2010年1月頃にテスト公開しているが、デフォルトの標準プレイヤーとして採用するためにはまだ機能不足であると判断し、Flashをメインプレイヤーとして利用してきた。 発表内容によると、HTML5が技術的にFlash版プレイヤーを置き換えても差し支えないと判断した模様。特にユーザーのネット環境に最適な動画品質を調整することができる「Adaptive Bitrate（ABR）」をサポートしたことは非常に大きいと書かれている。 他にも「VP9」と呼ばれるコーデックをサポートしたことにより、ファ
パーティーには音楽が欠かせないものですが、欠席している人や遠く離れた人でも流しているBGMを共有できれば同じ雰囲気を味わうことも可能です。でも「音楽は共有したいけど勝手にスキップされたりしてケンカしたくない！」という時に便利なのが、招待された人はプレイリストを勝手に変更できずにスマートフォン・タブレット・PCのブラウザ間でYouTubeのプレイリストを共有できる「Playlistful」です。 Playlistful http://playlistful.com/ 「Start a party」をクリック。 表示されているURLを開きます。 シェアする人に表示する名前を入力したら「Join」をクリック。 プレイリストは空なので「Search」をクリックして入力欄からアーティスト名や曲名を入力します。 検索結果が表示されるので、お目当ての曲が見つかったら「ADD」をクリックしてプレイリストに
Facebookの初期デザインもひどかった学生ノリで開発したFacebookも最初はひどかったです。 参照：File:Original-facebook.jpg Facebookが2004年にローンチしたとき、たった８つの機能しか実装していなかったにもあった通り、最初はProfile画面がTOPに来ていたんですね。 ですが、今はこんなに洗練されています。最初なんて未完成でいいんですよね。あとから、いくらでも改善できますから。 Yahoo!の初期デザインYahoo!も昔はこんな感じだったんですね。 今はすっかりおなじみのこちらのデザインになっています。 tumblr.の初期デザインミニブログサービス「tumblr.」もこんな感じでした。 参照：4903v1.png (495×520) 今ではこんなにかっこよくなってます。 Googleの初期デザインGoogleも！こりゃすごい。 参照：Bla
WISS Tokyo 〜日本語予測入力やマルチタッチはここから生まれた、2012年にはイグノーベル賞まで〜 WISS20周年記念イベント http://www.wiss.org/wisstokyo/
PrettyEmbed.js Demo - CodePen Youtube動画はカッコよく埋め込もう「PrettyEmbed.js」。 通常埋め込むと動画コントローラーやラベルが表示されて便利なんですが、どうしてもYoutube埋め込んだ感が凄くなりますね。 そこで、PrettyEmbedを使えば次のように。せっかくデザインしたサイトもYoutube埋め込みでかっこわるくならないようにできますね 関連エントリ Youtube,Vimeo,Dailymotion等の動画APIを共通化できる「jquery-video」 流行りのYoutube風ローディングバー実装jQueryプラグイン YoutubeのChannel・Playlistの動画リストを表示できるjQueryプラグイン「PlumTube」
dachcom-digital/jquery-video GitHub Youtube,Vimeo,Dailymotion等の動画APIを共通化できる「jquery-video」 Youtube,Vimeo等ではサイト上に動画を貼り付けられますが、再生、停止等のAPIもそれぞれあります。このAPIを共通で使うjqueryプラグインです。 動画を扱うようなサイトで、動画ウィジェットを制御したい場合に便利そうです 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 YoutubeのChannel・Playlistの動画リストを表示できるjQueryプラグイン「PlumTube」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く