WisdomMingle.com（ウィズダムミングル・ドットコム）

WisdomMingle.com（ウィズダムミングル・ドットコム）

「HTML」タグの記事一覧

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

By 倉田 幸暢 (Yukinobu Kurata)

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

※注記：YouTubeの Flash API は、現在では、非推奨になっています。

YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー（「Flash（AS3）プレーヤー」）（<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー）のことです。

ですので、このページで解説している内容も、現在は非推奨になっています。

代替策として、下記のリンクのページの情報（IFrameプレーヤーAPI（JavaScript）を使用する方法）をご覧いただければとおもいます。

（代替策：IFrameプレーヤーAPI（JavaScript）を使用する方法）
「YouTube動画の一時停止ができないようにする仕組み （IFrameプレーヤーAPI（JavaScript））」の解説ページ

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

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

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

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

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

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

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

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

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

続きを読む →

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

By 倉田 幸暢 (Yukinobu Kurata)

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

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

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

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

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

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

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

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

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

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

続きを読む →

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

By 倉田 幸暢 (Yukinobu Kurata)

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

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

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

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

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

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

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

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

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

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

続きを読む →

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

By 倉田 幸暢 (Yukinobu Kurata)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

科学の勝利ですね（笑）。

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

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

続きを読む →

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

By 倉田 幸暢 (Yukinobu Kurata)

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

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

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

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

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

実例１： 自動的に再生が始まり、巻き戻しや、早送りはできない

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

これによって、自動的に再生が始まり、操作は一時停止しかできないため、巻き戻しや、早送りはできません。

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

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

<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マスターになっちゃうぜ学園： カリキュラム一覧表 ）

実例２： コントロールバーを非表示にする

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

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

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

▲ もくじへもどる

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

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

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

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

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

▲ もくじへもどる

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

実例４： 一部分だけを再生する

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

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

<iframe width="560" height="315" src="https://www.youtube.com/embed/Xye1sEOG0CA?start=114&end=151" frameborder="0" allowfullscreen></iframe>

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

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

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

▲ もくじへもどる

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

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

続きを読む →

XHTMLからHTML5への時代の変化（2009年9月2日執筆）

By 倉田 幸暢 (Yukinobu Kurata)

Change (*1)

 

（下記の文章は、2009年9月2日に、ぼくが当時一緒に働いていた方に書き送ったレポートです。）

続きを読む →

  1. （Change by Muhammad Butt, on Flickr） [↩ Back]

メルマガ登録
いろんな分野のごちゃまぜメルマガ