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

  • このエントリーをはてなブックマークに追加
  • LINEで送る
  • Pocket
  • Feedlyでブログの常連さんになる
    114

ここでは、「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のリポジトリ

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

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

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

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

カスタマイズして自分用に使う方法(ソースコードの解説)

基本的な設定項目

//★ユーザー用の設定項目

//★動画プレーヤーの横幅と縦幅を設定する(ピクセル数)。

        //横幅
        var videoWidth = 530;

        //縦幅
        var videoHeight = 298;

//★表示させるYouTube動画の「動画ID」を設定する。
        var youtubeVideoID = "Xye1sEOG0CA";

動画プレーヤーの横幅と縦幅については、つぎのとおりです。
「var videoWidth = 530;」の「530」のところに、横幅をいれてください。
「var videoHeight = 298;」の「298」のところに、縦幅をいれてください。

表示させるYouTube動画については、「var youtubeVideoID = "Xye1sEOG0CA";」の「Xye1sEOG0CA」のところに、表示させたいYouTube動画の「動画ID」をいれてください。

YouTube動画の「動画ID」というのは、YouTube動画の個別視聴ベージのURLのなかの「v=***********」という部分の「***********」の英数字のことです。
下の例でいうと、「Xye1sEOG0CA」という部分が、「動画ID」です。
YouTube動画の個別視聴ベージのURLの例
http://www.youtube.com/watch?v=Xye1sEOG0CA&feature=player_embedded

「swfobject.embedSWF()」によるFlash形式の埋め込み動画プレーヤーの設定

	// 他のドメインにから呼び出されているSWF形式の動画プレーヤーが
	// 埋め込み先のHTMLページのなかでJavaScriptの関数を実行できるようにする。
	var params = { allowScriptAccess: "always" };

	// Flash形式の埋め込み動画プレーヤーのHTML要素のid名。
	var atts = { id: "ytPlayer" };

	// 「SWFObject」によるFlash形式の埋め込み動画プレーヤーの設定。
	// (「SWFObject」 http://code.google.com/p/swfobject/ )
	swfobject.embedSWF("http://www.youtube.com/apiplayer?" +
										 "version=3&enablejsapi=1&playerapiid=player1",
										 "videoDiv", videoWidth, videoHeight, "9", null, null, params, atts);

上記の「swfobject.embedSWF()」は、つぎのような構造をしています。

swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj)
  • swfUrlStr - SWFファイル(動画ファイル)のURLです。この例では、「JavaScriptプレーヤーAPI」を有効にするために、通常のSWFファイルのURLの後ろに、「enablejsapi」と「playerapiid」の「パラメータ」をつけています。
  • replaceElemIdStr - これは、HTMLの<div>タグのid名です。このid名がついている<div>タグは、YouTubeの埋め込み動画プレーヤーに置き換えられます。
  • widthStr - 動画プレーヤーの横幅です。
  • heightStr - 動画プレーヤーの縦幅です。
  • swfVersionStr - 動画コンテンツを見るために最低限必要なAdobeのFlashプレーヤーのバージョン数です。この例では、バージョン9か、それ以降のバージョンのFlashプレーヤーが必要になります。ここで指定しているバージョンよりも低いバージョンのFlashプレーヤーしかインストールされていない場合は、「replaceElemIdStr」で指定したid名の<div>タグは、動画プレーヤーに置き換えられません。
  • xiSwfUrlStr - (オプション項目)「expressInstall.swf」のURLを指定します。今回の例ではこの項目は使用していません。
  • flashVarsObj - (オプション項目)「FlashVars」を「name:value」の形式で指定します。 今回の例ではこの項目は使用していません。
  • parObj - (オプション項目)埋め込み要素である<object>タグの「パラメータ」です。今回の例では、「allowScriptAccess」を指定しています。
  • AttObj - (オプション項目)埋め込み要素である<object>タグの「属性」です。今回の例では、id名を「ytPlayer」に設定しています。

「Chromeless Player」(クロムレスプレーヤー)と「JavaScriptプレーヤーAPI」について

上の実例では、「Chromeless Player」(クロムレスプレーヤー)「JavaScriptプレーヤーAPI」をつかって、YouTubeの動画プレーヤーを制御しています。

「Chromeless Player」(クロムレスプレーヤー)は、Flash形式の埋め込み動画プレーヤーなので、スマートフォンなどのモバイル機器では、YouTubeの動画を見ることができません。

JavaScriptの「イベントリスナー」の機能をつかうことができるので、YouTube動画に関する「イベント」が発生したときに、あらかじめ指定した動作をさせることができます。

今回の例でいうと、「ytplayer.addEventListener("onStateChange", "onPlayerStateChange");」と「function onPlayerStateChange(newState)」の部分がそれにあたります。

	// 「イベントリスナー」
	//左の値は「イベントリスナー」、右の値はそのイベントが発生した時に実行される関数。
	ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
		// 動画の再生状態が変わったときに実行される関数
		function onPlayerStateChange(newState) {

		}

商用利用でも、有料販売でも、改造でも、なんにでも、自由に無料でつかってください(ライセンスについて)

このページでお話している仕組み(ソフトウェア)は、MITライセンスのもとでオープンソースソフトウェアとして配布しています。

条件を守っていただけるのであれば、誰でも自由に無料で、このソフトウェアをつかっていただくことができます。

このソフトウェアをコピーしてつかったり、配布したり、変更を加えたり、変更を加えたものを配布したり、商用利用したり、有料で販売したりと、なんにでも自由につかってください。

このソフトウェアを利用するには、「著作権表示」と「ライセンスの全文」を掲載することと、無保証であることを受け入れることという条件を守っていただく必要があります。

このソフトウェアの場合、「著作権表示」と「ライセンスの全文」の掲載については、ソースコードのなかや、同梱の別ファイルなどに下記の記述を掲載していただくだけでかまいません。

Copyright (c) 2013 Yukinobu Kurata
Released under the MIT license
https://github.com/YukinobuKurata/YouTubeUnstoppableChromelessPlayer/blob/master/MIT-LICENSE.txt

「Copyright (c) 2013 Yukinobu Kurata」という部分は、「著作権表示」の部分です。
「Released under the MIT license」という部分は、「MITライセンスのもとで配布されている」ということを示しています。
最後のURLは、「ライセンスの全文」が掲載されているページのURLです。

(参考)
MITライセンスの詳しい説明は、下のページでお話しています。

MITライセンスについて
http://wisdommingle.com/mit-license/

参考サイト

この仕組み(ソフトウェア)をつくるにあたっては、おもに下記のウェブサイトを参考にさせていただき、その情報やコードを利用させていただきました。

このほかにも、かるく目を通したウェブページまでふくめると、とてもたくさんのページを参考にさせていただきました。ですが、それらのページをすべてここに掲載することはできませんので、そのかわりに、とくに参考にさせていただいたウェブページのリンクを掲載させていただきます。

たくさんの有益な情報を提供していただき、ありがとうございました。
m(_ _)m

Google Code Playground
YouTube » Player » Chromeless Player
https://code.google.com/apis/ajax/playground/?exp=youtube#chromeless_player

YouTube JavaScript Player API Reference - YouTube — Google Developers
Embedding the SWF(Embedding the YouTube player using SWFObject)
https://developers.google.com/youtube/js_api_reference#Embedding

Google Loader Developer's Guide - Google Loader — Google Developers
https://developers.google.com/loader/

swfobject - SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file - Google Project Hosting
http://code.google.com/p/swfobject/

YouTube APIについての関連記事

下の記事は、「YouTubeのAPI」についての、そのほかの関連記事です。
YouTubeのAPIについてもっと知りたい場合は、下のリンクをクリックして、これらの記事もご覧ください。

YouTubeのうまい使い方についての関連記事

下の記事は、「YouTubeのうまい使い方」についての関連記事です。
YouTubeのうまい使い方について知りたい場合は、下のリンクをクリックして、これらの記事もご覧ください。




『ザ・ローンチ(世界一効率的に億万長者になる方法)』著者:ジェフ・ウォーカー

『ザ・ローンチ (世界一効率的に億万長者になる方法)』
著者:ジェフ・ウォーカー

専業主夫が、たった7日で1000万円以上の売上を達成し、
「1日1億円の売上」を常識にした販売手法を、あなたにも。



このページの先頭へ