「API」タグの記事一覧

YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表

YouTube動画の一時停止ができないようにする仕組み (Chromeless Player(クロムレスプレーヤー)(JavaScriptプレーヤーAPI))

ここでは、「YouTube動画の一時停止ができないようにする」という仕組みの実例と、その仕組みをカスタマイズしてつかう方法をお話します。(「Chromeless Player」(クロムレスプレーヤー)と「JavaScriptプレーヤーAPI」を利用します。動画プレーヤーはFlash形式になります。)

下は、この仕組みの実例です。YouTube動画を再生しはじめると、画面をクリックして一時停止にしようとしても動画を止めることはできません。(コントロールバーは非表示なので、一時停止ボタンを押すことはできません。)

これによって、「動画を見はじめたら最後まで見るしかなくなる」という仕組みをつくることができます。ページを再読み込みすれば動画の再生は止まりますが、そうすると、つぎに動画を見るときは、またいちばん最初から見なおさなければならなくなります。

下の実例の上部の「HTML」タブを押すと、この仕組みのソースコード(HTML、JavaScript、CSS)を見ることができます。

上の実例の上部のメニューバーのなかのタブやボタンの内容は、つぎのとおりです。
左端のロゴマーク: ソースコードと実行画面を左右に表示。
「Readme」タブ: この仕組みの概要や著作権についての情報。
「HTML」タブ: この仕組みのソースコード(HTML、JavaScript、CSS)。
「Play/Stop」ボタン: ソースコードの実行/停止。
右端の黒いボタン: 全画面表示。

ソースコードのダウンロードは、こちらをクリックGitHubのリポジトリ

動画マーケティングに応用する方法

セールスレターや、オプトインページなどで、途中で動画の再生を止めずに、動画の内容をいっきにすべて見てほしいという場合に、この仕組みをつかうといいでしょう。

誰でもかんたんにつかえるように、設定項目はできるだけわかりやすくしました。

興味があれば、ぜひこの仕組みをつかってみてください。

続きを読む

YouTube動画の再生終了後にリダイレクトで別のページに自動的に移動させる仕組み (IFrameプレーヤーAPI(JavaScript))

ここでは、「YouTube動画の再生終了後にリダイレクトで別のページに自動的に移動させる」という仕組みの実例と、その仕組みをカスタマイズしてつかう方法をお話します。

下は、この仕組みの実例です。YouTube動画を最後まで再生すると、それと同時にリダイレクトで別のページに飛ばされます。(話をわかりやすくするために、動画は50秒ほどの短いものにしています。)

これによって、「動画を最後まで見た人をあらかじめ設定しておいたページに自動的に移動させることができる」という仕組みをつくることができます。

下の実例の上部の「HTML」タブを押すと、この仕組みのソースコード(HTML、JavaScript、CSS)を見ることができます。

上の実例の上部のメニューバーのなかのタブやボタンの内容は、つぎのとおりです。
左端のロゴマーク: ソースコードと実行画面を左右に表示。
「Readme」タブ: この仕組みの概要や著作権についての情報。
「HTML」タブ: この仕組みのソースコード(HTML、JavaScript、CSS)。
「Play/Stop」ボタン: ソースコードの実行/停止。
右端の黒いボタン: 全画面表示。

ソースコードのダウンロードは、こちらをクリックGitHubのリポジトリ

動画マーケティングに応用する方法

動画を最後まで見た後、視聴者の操作を待たずにリダイレクトで自動的に、セールスレターや、オプトインページなどに移動させたいという場合に、この仕組みをつかうといいでしょう。

誰でもかんたんにつかえるように、設定項目はできるだけわかりやすくしました。

興味があれば、ぜひこの仕組みをつかってみてください。

続きを読む

YouTube動画の一時停止ができないようにする仕組み (IFrameプレーヤーAPI(JavaScript))

ここでは、「YouTube動画の一時停止ができないようにする」という仕組みの実例と、その仕組みをカスタマイズしてつかう方法をお話します。

下は、この仕組みの実例です。YouTube動画を再生しはじめると、画面をクリックして一時停止にしようとしても動画を止めることはできません。(コントロールバーは非表示にしているので、一時停止ボタンを押すことはできません。)

これによって、「動画を見はじめたら最後まで見るしかなくなる」という仕組みをつくることができます。ページを再読み込みすれば動画の再生は止まりますが、そうすると、つぎに動画を見るときは、またいちばん最初から見なおさなければならなくなります。

下の実例の上部の「HTML」タブを押すと、この仕組みのソースコード(HTML、JavaScript、CSS)を見ることができます。

上の実例の上部のメニューバーのなかのタブやボタンの内容は、つぎのとおりです。
左端のロゴマーク: ソースコードと実行画面を左右に表示。
「Readme」タブ: この仕組みの概要や著作権についての情報。
「HTML」タブ: この仕組みのソースコード(HTML、JavaScript、CSS)。
「Play/Stop」ボタン: ソースコードの実行/停止。
右端の黒いボタン: 全画面表示。

ソースコードのダウンロードは、こちらをクリックGitHubのリポジトリ

動画マーケティングに応用する方法

セールスレターや、オプトインページなどで、途中で動画の再生を止めずに、動画の内容をいっきにすべて見てほしいという場合に、この仕組みをつかうといいでしょう。

誰でもかんたんにつかえるように、設定項目はできるだけわかりやすくしました。

興味があれば、ぜひこの仕組みをつかってみてください。

続きを読む

YouTube動画と連動してあらかじめ設定した時間になると購入ボタンが表示される仕組み (HTML、IFrameプレーヤーAPI(JavaScript)、CSS)

ここでは、「YouTube動画と連動して、あらかじめ設定した時間になると購入ボタンが表示される」という仕組みの実例と、その仕組みをカスタマイズしてつかう方法をお話します。

下は、この仕組みの実例です。YouTube動画を再生しはじめてから、一定時間(20秒)が経過すると、動画の下に購入ボタンが表示されるように設定しています。

途中で一時停止すると、カウントダウンタイマーも一時停止します。もう一度再生をはじめると、カウントダウンタイマーも動き出します。これによって、「指定した時間まで動画が再生されたときだけ、購入ボタンを表示させる」という仕組みを実現することができます。

下の実例の上部の「HTML」タブを押すと、この仕組みのソースコード(HTML、JavaScript、CSS)を見ることができます。

上の実例の上部のメニューバーのなかのタブやボタンの内容は、つぎのとおりです。
左端のロゴマーク: ソースコードと実行画面を左右に表示。
「Readme」タブ: この仕組みの概要や著作権についての情報。
「HTML」タブ: この仕組みのソースコード(HTML、JavaScript、CSS)。
「Play/Stop」ボタン: ソースコードの実行/停止。
右端の黒いボタン: 全画面表示。

ソースコードのダウンロードは、こちらをクリックGitHubのリポジトリ

動画マーケティングに応用する方法

この仕組みは、「YouTube動画と連動して、あらかじめ設定した時間になると購入ボタンが表示される」という仕組みです。

わかりやすくいうと、「動画の内容をちゃんと見た人だけつぎのステップに進める」という仕組みです。

動画セールスレターや、オプトインページなどでこの仕組みをつかうと、効果的です。

もし、動画の下にはじめから購入ボタンがついていたら、それを見た人は「この動画は売り込みのための動画だ!」とおもって、抵抗感がうまれてしまいます。

これでは、提案を受け入れてもらいにくくなってしまいます。

そうではなく、はじめは購入ボタンを表示させないようにしておいて、抵抗感なく動画を見はじめてもらい、動画のなかで興味を引いてから、頃合いを見計らって購入ボタンを表示する。

こうすれば、抵抗感を引き起こさずに、自然な流れで提案をおこなうことができるので、提案を受け入れてもらえる確率があがります。

その結果として、成約率やオプトイン率が上がるでしょう。

また、このカウントダウンタイマーは、YouTube動画の一時停止/再生と連動して動きます。なので、動画を一時停止するとカウントダウンタイマーも一時停止し、もう一度動画の再生をはじめると、カウントダウンタイマーも動き出します。

これによって、「指定した時間まで動画が再生されたときだけ、購入ボタンを表示させる」という仕組みを実現することができます。

僕が知るかぎり、このような仕組みはこれまで有料のツールでしか実現できませんでした。

それが、今や、完全に無料で誰でも自由につかうことができるようになりました。

科学の勝利ですね(笑)。

あと、誰でもかんたんにつかえるようにするために、設定項目もできるだけわかりやすくしました。

興味があれば、ぜひこの仕組みをつかってみてください。

続きを読む

YouTube動画の22のパラメータまとめ+αと埋め込みコードの実例

ここでは、YouTube動画の埋め込みプレーヤーの見た目や機能をカスタマイズするための
「パラメータ」という機能の使い方についてお話します。

また、YouTubeの埋め込み動画プレーヤーをつかうときに前提となる、<iframe>タグや、<object>タグ、HTML5形式の動画プレーヤー、Flash形式の動画プレーヤー、クロムレスプレーヤーなどの情報についてもお話します。

さらに、JavaScriptやActionScriptをつかって動画プレーヤーを自由に制御することができるAPIについてもお話します。

「パラメータ」をつかうと、どんなことができるの?

まず、「パラメータ」をつかってどんなことができるのかを知るために、下の実例を見てください。

実例1: 自動的に再生をはじめ、操作は一時停止しかできない

下の動画は、「パラメータ」をつかってつぎのような設定にしています。

(下の動画は、音声無しの動画にしています。これは、この動画は自動的に再生されるように設定しているため、このページを読み込んだときに自動的に音が出ると不都合なことがあるかもしれないということを考慮してのことです。)

この動画の埋め込みコード

<iframe width="560" height="315" src="https://www.youtube.com/embed/OW37a07RMTs?controls=0&showinfo=0&autoplay=1&rel=0" frameborder="0" allowfullscreen></iframe>

▲ もくじへもどる

YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表

実例2: コントロールバーを自動的に隠す

下の動画は、「パラメータ」をつかってつぎのような設定にしています。

この動画の埋め込みコード

<iframe width="560" height="315" src="https://www.youtube.com/embed/tQroTplYWqg?rel=0&modestbranding=0&showinfo=0&fs=0&controls=1&autohide=1" frameborder="0" allowfullscreen></iframe>

▲ もくじへもどる

YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表

実例3: 複数の動画を連続して再生させ、それを繰り返す

下の動画は、「パラメータ」をつかってつぎのような設定にしています。

この動画の埋め込みコード

<iframe width="560" height="315" src="https://www.youtube.com/embed/ZMdkZeCzj44?playlist=tQroTplYWqg,mSRDQ8Sja3I&loop=1" frameborder="0" allowfullscreen></iframe>

▲ もくじへもどる

YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表

実例4: 一部分だけを再生する

下の動画は、「パラメータ」をつかってつぎのような設定にしています。

この動画の埋め込みコード

<iframe width="560" height="315" src="https://www.youtube.com/embed/tQroTplYWqg?start=14&end=28&controls=1&autohide=0" frameborder="0" allowfullscreen></iframe>

これ以降では、まず、YouTubeの埋め込み動画プレーヤーをつかううえでの基本となる、<iframe>タグや、<object>タグ、HTML5形式の動画プレーヤー、Flash形式の動画プレーヤー、クロムレスプレーヤーなどの情報についてお話します。

各種の「パラメータ」についての説明は、それらの基本情報のあとに掲載しています。

もし、「すぐにパラメータの情報が知りたい」という場合や、「基本はすでに知っているという場合」には、それらの基本情報の話を飛ばして、「パラメータ」について話しているところから見ていってください。

▲ もくじへもどる

YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表

目次
  1. 「パラメータ」をつかうと、どんなことができるの?
    1. 実例1: 自動的に再生をはじめ、操作は一時停止しかできない
    2. 実例2: コントロールバーを自動的に隠す
    3. 実例3: 複数の動画を連続して再生させ、それを繰り返す
    4. 実例4: 一部分だけを再生する
  2. 埋め込み動画プレーヤーの2つの種類 - 埋め込みプレーヤー(標準)とクロムレスプレーヤー
    1. 埋め込みプレーヤー(標準)
    2. クロムレスプレーヤー(chromeless player)
  3. 埋め込みコードのHTMLタグの2つの種類 - <iframe>タグと<object>タグ
    1. HTML5形式の埋め込み動画プレーヤー
    2. Flash形式の埋め込み動画プレーヤー - 「Flash(AS3)プレーヤー」
    3. <iframe>タグ(HTML5形式 & Flash形式)
      1. <iframe>タグ(HTML5形式の動画プレーヤーの場合)
      2. <iframe>タグ(Flash形式の動画プレーヤー(「Flash(AS3)プレーヤー」)の場合)
    4. <object>タグ(Flash形式の動画プレーヤー(「Flash(AS3)プレーヤー」))
  4. 「パラメータ」
    1. 再生後に表示される「関連動画」を非表示にする - 「rel」(リレイテッドビデオ)
      1. 「rel=0」(「関連動画」を非表示にする)
      2. 「rel=1」(「関連動画」を表示する)
    2. コントロールバーのYouTubeロゴを非表示にする - 「modestbranding」(モデストブランディング)
      1. 「modestbranding=1」(コントロールバーのYouTubeロゴを非表示にする)
      2. 「modestbranding=0」(コントロールバーのYouTubeロゴを表示する)
    3. 自動的に再生を始める - 「autoplay」(オートプレイ)
    4. 繰り返し再生させる - 「loop」(ループ)
      1. 通常の動画プレーヤーで「loop」をつかう場合
      2. 「再生リスト」の動画プレーヤーで「loop」をつかう場合
        1. Flash形式(<object>タグ)の「再生リスト」の動画プレーヤーで「loop」をつかう場合
        2. HTML5形式(<iframe>タグ)の「再生リスト」の動画プレーヤーで「loop」をつかう場合
    5. コントロールバーを非表示にする/表示する - 「controls」(コントロールズ)
      1. 「controls=0」(コントロールバーを非表示にする)
      2. 「controls=1」(コントロールバーを表示する)(「Flash(AS3)プレーヤー」形式)
      3. 「controls=2」(コントロールバーを表示する & パフォーマンス向上)(「Flash(AS3)プレーヤー」形式)
    6. コントロールバーとプログレスバー(シークバー)を隠す/常に表示させる - 「autohide」(オートハイド)
      1. 「autohide=1」(コントロールバーとプログレスバー(シークバー)が隠れる)
        1. コントロールバーとプログレスバー(シークバー)を完全に非表示にする
      2. 「autohide=0」(コントロールバーとプログレスバー(シークバー)を表示させ続ける)
      3. 「autohide=2」(プログレスバー(シークバー)が目立たないようになる)
    7. 全画面表示ボタンを非表示にする - 「fs」(フルスクリーン)
      1. 「fs=0」(全画面表示ボタンを非表示にする)
      2. 「fs=1」(全画面表示ボタンを表示する)
      3. 「fs」をHTML5形式の動画プレーヤーでつかう
        1. 「fs=0」(全画面表示ボタンを非表示にする)(HTML5形式の動画プレーヤーの場合)
        2. 「fs=0」(全画面表示ボタンを非表示にする & 全画面表示ができないようにする)(HTML5形式の動画プレーヤーの場合)
    8. タイトルバーを非表示にする - 「showinfo」(ショウインフォ)
      1. 「showinfo=0」(タイトルバーを非表示にする)
      2. 「showinfo=1」(「再生リスト」のサムネイルを表示させる)(「再生リスト」の動画プレーヤーの場合)
      3. (参考)「showinfo」を明示的に設定しない場合(「再生リスト」のサムネイルを表示しない)(「再生リスト」の動画プレーヤーの場合)
    9. 最初から高画質/低画質で再生する - 「vq」(ビデオクオリティー)
      1. 「vq=hd1080」: 画質1080p(HD画質(高精細度))
      2. 「vq=hd720」: 画質720p(HD画質(高精細度))
      3. 「vq=large」: 画質480p
      4. 「vq=medium」: 画質360p
      5. 「vq=small」: 画質240p
    10. 再生を開始する位置を指定する – 「start」(スタート)
    11. 再生を終了する位置を指定する – 「end」(エンド)
    12. 「再生リスト」、公開動画リスト、動画検索結果リストを動画プレーヤーとして埋め込む - 「listType」(リストタイプ)&「list」(リスト)
      1. HTML5形式の動画プレーヤー(<iframe>タグ)をつかった「再生リスト」の動画プレーヤー
      2. Flash形式の動画プレーヤー(<object>タグ)をつかった「再生リスト」の動画プレーヤー
        1. (参考)「showinfo=1」に設定した場合(「再生リスト」のサムネイルを表示させる)
      3. 特定のユーザーの公開動画のリスト(「アップロード動画」)を動画プレーヤーとして埋め込む
        1. (参考)「showinfo=1」に設定した場合(「アップロード動画」のリストのサムネイルを表示させる)
      4. YouTube動画検索の検索結果の動画のリストを動画プレーヤーとして埋め込む
        1. (参考)「showinfo=1」に設定した場合(動画検索結果のリストのサムネイルを表示させる)
    13. 複数の動画から「再生リスト」をつくって動画プレーヤーとして埋め込む - 「playlist」(プレイリスト)
      1. 「playlist」をつかった「再生リスト」の動画プレーヤー(HTML5形式)
      2. 「playlist」をつかった「再生リスト」の動画プレーヤー(「Flash(AS3)プレーヤー」形式)、「showinfo=1」に設定した場合(「再生リスト」のサムネイルを表示させる)
    14. コントロールバーとプログレスバー(シークバー)の色を変える - 「theme」(テーマ)&「color」(カラー)
      1. 「theme=dark」「color=red」: コントロールバー黒色、プログレスバー(シークバー)赤色
      2. 「theme=dark」「color=white」: コントロールバー黒色、プログレスバー(シークバー)白色
      3. 「theme=light」「color=red」: コントロールバー灰色、プログレスバー(シークバー)赤色
      4. 「theme=light」「color=white」: コントロールバー灰色、プログレスバー(シークバー)白色
    15. 「アノテーション」を非表示にする/表示する – 「iv_load_policy」(ivロードポリシー)
      1. 「iv_load_policy=1」(「アノテーション」表示)
      2. 「iv_load_policy=3」(「アノテーション」非表示)
    16. キーボードからの操作を無効にする – 「disablekb」(ディスエイブルキーボード)
      1. 「disablekb=1」(キーボード操作無効)
      2. 「disablekb=0」(キーボード操作有効)
    17. 字幕を表示させる – 「cc_load_policy」(クローズドキャプションポリシー)
      1. 「cc_load_policy=1」(字幕を表示)
      2. 「cc_load_policy」のパラメータを設定していない場合
    18. 「JavaScriptプレーヤーAPI」関連のパラメータ – 「enablejsapi」(イネイブル JS API)&「playerapiid」(プレーヤーAPI ID)&「origin」(オリジン)
      1. 「enablejsapi」(イネイブル JS API)
      2. 「playerapiid」(プレーヤーAPI ID)
      3. 「origin」(オリジン)
    19. (参考)全画面表示ができないようにする - 「allowfullscreen」(アラウフルスクリーン)
      1. 「allowfullscreen」無し(全画面表示ができないようにする)
      2. 「allowfullscreen」有り(全画面表示ができるようにする)
    20. (参考)周囲に枠線をつける - 「frameborder」(フレームボーダー)
      1. 「frameborder="1"」(周囲に枠線をつける)
      2. 「frameborder="0"」(周囲に枠線をつけない)
  5. (参考)非推奨(廃止予定)のパラメータ(「Flash(AS2)プレーヤーAPI」限定)
  6. 動画プレーヤーを制御するための3つのAPI
    1. 「IFrameプレーヤーAPI」
    2. 「Flash(AS3)プレーヤーAPI」
    3. 「JavaScriptプレーヤーAPI」
  7. 参考サイト、YouTube公式ヘルプページ
    1. 「YouTube埋め込み動画プレーヤーのパラメータ」関連
    2. 「YouTubeプレーヤーAPI」関連
      1. 「IFrameプレーヤーAPI」のリファレンス
      2. 「Flash(AS3)プレーヤーAPI」のリファレンス
      3. 「JavaScriptプレーヤーAPI」のリファレンス
    3. YouTube埋め込み動画プレーヤーの作成ツール/デモ
    4. その他
  8. おもしろい組み合わせ方を思いついたら、ぜひ教えてください
    1. YouTube APIについての関連記事
    2. YouTubeのうまい使い方についての関連記事

続きを読む

メルマガ登録
メールマガジンへのご登録は、こちらからどうぞ
PR

このページの先頭へ