• お役立ち

ツイキャスの動画をSSLページ内に(無理やり)埋め込む ※一応レスポンシブ対応

  • このエントリーをはてなブックマークに追加
  • LINEで送る

ニッチなネタですが、ツイキャスの動画をSSL配下のページ内に埋め込むと、PCで表示されないという問題が発生しました。埋め込みに使ったのは下記のコード。
※「USER_ID」部分はツイキャスのユーザーIDが入ります。

<script type="text/javascript" src="http://twitcasting.tv/USER_ID/embed/live-480-0"></script>

試しにsrc属性を「https://」にしても表示されず。ブラウザのインスペクタで確認したところ、どうやら上記JS内から非SSLのリソースを読み込んでしまっている模様。
さらに調べてみると、アクセスしてくるブラウザ(デバイス)に応じて、サーバ側で異なるJSを吐き出しているようです。

そこで、力技ですが、クロスプラットフォームで表示する用のJSを組み、前述の(=公式の)JSの代わりに読み込ませてみたところ、うまく表示されるようになりました。

twitcasting.js

if (document.getElementById("twitcasting-USER_ID-live")){
	// has already
}else{
	document.write('<div id="twitcasting-USER_ID-live" class="twitcasting-live-embed"></div>');
	var twitcasting_div = document.getElementById("twitcasting-USER_ID-live");
	with (twitcasting_div.style) {
		margin = 0;
		padding = 0;
		border = 0;
		display = "block";
	}
	switch(true){
		/**
		 * iOS:ツイキャスへのリンクを表示
		 */
		case (navigator.userAgent.indexOf('iPhone') > 0):
		case (navigator.userAgent.indexOf('iPad') > 0):
			twitcasting_div.innerHTML = "<a href=\"\/\/twitcasting.tv\/USER_ID\/metastream.m3u8\/?video=1\"><img src=\"http:\/\/202.234.44.22:8093\/USER_ID\/6\" width=\"480\" height=\"270\"><\/a><br>";
			break;
		/**
		 * Android:videoタグを表示
		 */
		case (navigator.userAgent.indexOf("Android")>0):
			twitcasting_div.innerHTML = "<video src=\"http:\/\/twitcasting.tv\/USER_ID\/metastream.m3u8?video=1\" width=\"480\" height=\"270\" controls=\"true\" onclick=\"this.play()\">";
			break;
		/**
		 * その他(≒PC):Flashを表示
		 */
		default:
			twitcasting_div.innerHTML = "<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http:\/\/download.macromedia.com\/pub\/shockwave\/cabs\/flash\/swflash.cab#version=10,0,0,0\" width=\"480\" height=\"297\" id=\"livestreamer\" align=\"middle\"><param name=\"allowScriptAccess\" value=\"always\" \/><param name=\"allowFullScreen\" value=\"true\" \/><param name=\"flashVars\" value=\"user=USER_ID&lang=ja&myself=&seed=&pass=\" \/><param name=\"movie\" value=\"\/\/twitcasting.tv\/swf\/livestreamer2sp.swf\" \/><param name=\"quality\" value=\"high\" \/><param name=\"bgcolor\" value=\"#ffffff\" \/><embed src=\"\/\/twitcasting.tv\/swf\/livestreamer2sp.swf\" quality=\"high\" bgcolor=\"#ffffff\" width=\"480\" height=\"297\" name=\"livestreamer\" id=\"livestreamderembed\" align=\"middle\" allowScriptAccess=\"always\" allowFullScreen=\"true\" type=\"application\/x-shockwave-flash\" pluginspage=\"http:\/\/www.adobe.com\/go\/getflashplayer\" flashVars=\"user=USER_ID&lang=ja&myself=&seed=&pass=\" ><\/object>";
			break;
	}
}
if (!TwitCastingLiveEventReceived){
	var TwitCastingLiveEventReceived = function(){
		// called when event received
	}
}

index.html

<script type="text/javascript" src="twitcasting.js"></script>

ただ、サーバ側で吐き出してるコードがこの三種類で過不足ないのかわからないですし、今後公式側の仕様が変わることもあるかと思うので、あくまで「現時点での力技」として載せています。

ご参考までに。

星虹思械BRICOLEUR

関連コンテンツ