みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

YouTube

YouTubeLiveでMacのウェブカメラで撮影している映像をライブ配信し、その様子をウェブページに埋め込んだプレイヤーに表示する方法

ひょんなことからYouTubeLiveをウェブページに埋め込む方法を調べました。 必要なもの Googleアカウント( https://accounts.google.com/SignUp ) Google Adsenseアカウント( https://www.google.co.jp/adsense/start/ ) Adsenseアカウントに紐付いたYouT…

iOS10でYouTubeをインライン再生&複数同時に再生するサイトをつくれるか検証する 📱

結論 (2本目以降をミュートにすれば)できる! kimizuka.hatenablog.com昨日の検証 で、iOS10であればYouTubeをインライン再生することが難しくないことがわかりました。kimizuka.hatenablog.com以前、PC向けにYouTubeの動画を2本同時に再生するサイト をつ…

iOS10でYouTubeをインライン再生&自動再生&ループ再生を試してページの背景がムービーのサイトをつくれるか検証する 📱

結論 できる! kimizuka.hatenablog.com以前、iOS10のビデオタグの挙動を調べました が、 videoタグを直接使う機会よりも、YouTubeをつかう機会の方が圧倒的に多いため、YouTubeの挙動を調べてみました。iOS10のビデオに関しての仕様を整理すると、 playsinl…

YouTubeをつかって映像編集ソフトを使わずに動画に手ぶれ補正をかける

YouTubeの手ぶれ補正が高性能でびっくりしました。 編集のプレビューもリアルタイムでレンダリングされるし、本当にすごいですね。 手ぶれ補正の手順 動画をアップして、 動画加工ツール > クイック編集 > スタビライズを選択するだけでOKです。 動画にもよ…

オンガクスリを作業用BGMとしてフル活用するためのブックマークレットをつくりました

qiita.comこの記事は 作業用BGM(個人or社内) Advent Calendar 2015 の18日目の記事です。 今回は作業用BGMから人生の悩みを解決するような音楽まで見つかるかもしれない、オンガクスリ というウェブサービスについて紹介したいと思います。 オンガクスリとは…

邦楽(J-POP)がフルコーラス聴けるYouTube公式チャンネルを自力で調べてまとめてみた結果から作業用BGMのプレイリストをつくってブックマークレットにしてみました

kimizuka.hatenablog.comkimizuka.hatenablog.com DEMO ブックマークレットにしてみました。 httpのページであればどこでもプレイリストを再生できます。

邦楽(J-POP)がフルコーラス聴けるYouTube公式チャンネルを自力で調べてまとめてみた結果から作業用BGMのプレイリストをつくってみました

kimizuka.hatenablog.com前回まとめた公式チャンネルから楽曲を幾つかピックアップして作業用BGMとしてプレイリストをつくってみました。 人気順に並べているのですが、ヘビーローテーションの再生回数は群を抜いてますね。 作業用BGMまとめ これで長時間の…

邦楽(J-POP)がフルコーラス聴けるYouTube公式チャンネルを自力で調べてまとめてみました

邦楽がフルコーラス上がっている公式チャンネルを探し求めていろいろ調べましたが、なかなか一覧が見つからなかったので自力で探しまくってみました。 まだまだあるとは思いますが、一旦まとめておきます。 フルで楽曲が上がっている公式チャンネル 宇多田ヒ…

YouTubeの埋め込みプレーヤーのUIの色を変更する

プレイヤーを生成するときの引数でプレーヤーの色を選択できることを知りました。theme に light を渡すことでUIをグレイに。 color に white を渡すことでシークバーを白に変更できます。YouTube 埋め込みプレーヤーとプレーヤーのパラメータ | YouTube IFr…

YouTube Data API v3をつかって動画を検索する(ログインあり)

kimizuka.hatenablog.com 前回ログインなしの動画検索 を実装しましたが、今回はログインありバージョンで実装してみます。 var OAUTH2_CLIENT_ID; // https://console.developers.google.com にて クライアントIDを作成する必要があります。 var OAUTH2_SCO…

YouTube Data API v3 をつかって動画の時間を取得する

JavaScript (function(win, doc, $) { "use strict"; // KEY は https://console.developers.google.com にて公開APIキーを作成する必要があります // ID はYouTubeのVideoIDを使用 $.ajax({ type : "get", dataType : "jsonp", url : "https://www.googleap…

YouTube Data API v3をつかって動画を検索する(ログインなし)

ついに YouTube Data API v2 が 停止してしまったので仕様を調べて v3 に乗り換えました。基本的には こちら を信じて実装すれば問題なく実装できます。実装方針としては、ユーザーにログインを求めるパターンと、ログイン不要のパターンがあるのですが、今…

続々・YouTubeの埋め込みプレーヤーを管理するクラスをつくる

以前つくったクラス を複数のプレイヤーを生成しやすいように改修しました。kimizuka.hatenablog.com 変更点 純正のYouTubePlayerを返すように変更しました。 addEventListenerに渡したコールバックに渡る引数を変更しました。 イベント名をクラスの定数とし…

YouTube Player API で再生速度を変える

setPlaybackRateを変更することで再生速度を変更することができます。 0.5倍から2倍まで指定ができるようです。 DEMO JavaScript // プレイヤーインスタンス収納用変数 var player; // iframeAPIの準備ができたときに実行されるコールバック関数 function on…

The Loading Stones

ローディング・ストーンズ - みかづきブログ その3かつて、ページのローディング中にローリーング・ストーンズの曲が流れる、「ローディング・ストーンズ」というギミックをつくったことがあったのですが、 公式チャンネル を見つけたので公式の音源に差し替…

YouTubeの埋め込みプレーヤーを管理するクラスをつくる

以前、 こんなクラス をつくりましたが、改良してみました。 続・YouTube Player APIをつかう - みかづきブログ その3 変更点 new できないように変更しました。 自動再生するか否かをオプションで指定できるように変更しました。 オプションの引数をオブジ…

続・YouTubeでマルチアングル風の演出をつくろう

YouTubeでマルチアングル風の演出をつくろう - みかづきブログ その3以前、2本のYouTubeを切り替えるモック をつくりましたが、それを応用して 「まじですかスカ!」 ( http://www.youtube.com/watch?v=ArfDmSjuU_Y)のPVを全員分同時に再生するサイトをつ…

PVスロットをつくろう

モーニング娘。のPVは Solo Close-up Ver. と題してメンバーそれぞれのアップバージョンがあることがあります。 そこで、「まじですかスカ!」 ( http://www.youtube.com/watch?v=ArfDmSjuU_Y)のPVを誰のバージョンをみるかをスロットのインターフェイスで…

YouTubeでマルチアングル風の演出をつくろう

例えばモー娘。のPVを見ている時、高橋さんも見たいけど亀井さんもチェックしたい。 そんなときがあると思います。(既に2人とも卒業してしまっていますが)そんなとき、PVがマルチアングルになっていると非常に捗りますね。そこで今回はYouTubをつかってワ…

続・YouTube Player APIをつかう

自分用にYouTube Playerをつくるクラスをつくってみました。 EventDispatcherを継承しており、onYouTubeIframeAPIReadyでイベントを発火してくれるので、playerにしたいDOMのidと再生したいビデオのidを渡すだけでプレイヤーをつくってくれます。 ソース (fu…

iframe API で読み込んだ YouTube動画のz-indexを有効にする

IE8などでは埋め込んだYouTubeプレーヤーがz-indexを無視して最前面にしゃしゃり出てくる現象が発生します。 今回はそれの解決策をメモしておきます。 iframe埋め込みの場合 iframe埋め込みの場合は貼り付け用URLにパラメータとして、 ?wmode=transparentを…

ローディングストーン

今更ですが、アジアンカンフージェネレーションがローリングストーンという曲をYouTubeにアップしていたことに気づいたのでつくってみました。ローディング・ストーンズ とか ライク・ア・ローディング・ストーン の横展開というか手抜き記事です。

ライク・ア・ローディング・ストーン

ローディング・ストーンズ が思いのほか好評だったのでForkしてつくってみました。 演出はつかいまわしです。

オンガクスリの投稿を連続再生する その2

こちらでつくったもの を改修しました。今回はiPhoneにも対応しております。 つかいかた1. アイコンをブックマークバーにドラックして登録 2. オンガクスリ( http://ongakusuri.com )にアクセス 3. マイページへ移動 4. 投稿した音楽ページに移動 5. 投稿…

ローディング・ストーンズ

ローディング中にジャンピン・ジャック・フラッシュが流れます。 ※ PC限定 ちょっとした解説 音はYouTubeから引っ張ってきています。 ローディングの演出は基本的にはCSSアニメーションで行い、メーターが溜まっていくところのみJSをつかっています。

YouTubePlayerを外部のJSファイルに切り出そう。

オールウェイズ。オールウェイズ。たった。

オンガクスリで今年を振り返ろう。

いま一番必要な音楽と出会えるサービスこと オンガクスリ 。そんなオンガクスリに投稿した音楽を振り返ることのできるブックマークレットをつくってみました。 オンガクスリ処方履歴連続再生ブックマークレット(新しい順に再生) オンガクスリ処方履歴連続…

YouTube Player API で埋め込んだ動画の関連動画を非表示にしよう。

以前 、YouTube Player API をつかってサイトに動画を埋め込む方法を紹介しました。 以前というか、このブログの1つ目のポストですね。なんだかしみじみしてしまいます。このときの埋め込み方だと動画再生後に、こんな感じで関連動画が表示されてしまいます…

YouTube Player API で念写を再現しよう。

ジョジョの奇妙な冒険 第三部にはテレビをつかった念写のシーンがあります。言葉では非常に説明しにくいのですが、 テレビに念を込めると、次々とチャンネルが変わっていき、「ーわれわれのー」 「中に」 「裏」 「切り」 「者」 「-がいる」 「カ」 「キョ…

続・YouTube Player API を つかってみよう。

前回は指定したIDのビデオを1本のみ再生しましたが、 今回は複数のIDを配列で渡してプレイリストの再生に試みます。 <html> <head> <meta charset="UTF-8"> <title>YouTube Player API テスト</title> </head> <body> <div id="player"></div> <script> var player; function onYouTubeIframeAPIReady() { // プレイヤーインスタンスの作成 player = new YT</body></html>…