SSブログ
ツイッターでブックマークレットが使えなく..｜Firefox 41.0.2でShock.. ブログトップ

Ustreamの動画をウィンドウの右下に表示するソース　[メール投稿]



　とりあえず、作った。簡易版なのでヘッダは適当。
　ウインドウサイズは1680×1050が前提。IE11での利用を想定。
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>USTREAM</title>
<script type="text/javascript">
function newsrc() {
var url="http://www.ustream.tv/embed/" +document.ust.ustid.value+ "?html5ui=1";
document.getElementById("Ustream").src = url;
}
</script>
</head>
<body>
<iframe width="360" height="203" src="" allowfullscreen="true" webkitallowfullscreen="true" scrolling="no" frameborder="0" style="border: 0px none transparent;" name="Ustream" id="Ustream"></iframe>
<br />
<form id="ust" name="ust">
<a href="http://www.ustream.tv" style="font-size: 12px; line-height: 20px; font-weight: normal; text-align: left;" target="_blank">Ustream</a>
<input type="text" id="ustid" name="ustid" style="width:200px;" />
<a href="javascript:newsrc();" style="font-size:12px;">開く</a>
<a href="#" onclick="window.open('Ustream.htm','','width=370,height=223,left=1310,top=827,location=yes,resizable=yes');return false;" style="font-size:12px;">追加</a>
</form>
</body>
</html>

　Ustream.htmの所は自分の作ったhtmlファイルの名前。
　ブックマークレットのリンクは次の通り。
javascript:(function(){window.open('Ustream.htm','','width=370,height=223,left=1310,top=827,location=yes,resizable=yes');})();

　Ustream.htmの所は自分の作ったhtmlファイルのURL。
　ウインドウの入力欄にはチャンネル名ではなく、埋め込みコードのsrc=""の中にあるURLの/embed/の後ろの数字を入れる。「開く」をクリックすると、白紙の所に動画が表示される。動画は、クリックしないと開始しない。
　ウインドウの「追加」をクリックすると同じ大きさの白紙のウインドウが同じ位置に表示される。ドラッグ＆ドロップで別の位置に持って行って、入力欄に該当の数字を入力して「開く」をクリックして別の動画を同時に見る。


追記（2015/12/6）：
修正バージョン
チャンネル名： 表示

参考ページ：Ustream/Justin汎用複数視聴ページ

　Ustream.htmを開くソース：
<script type="text/javascript">
<!--
var ustChIds = new Object();
function setUstId(ch, id){
    ustChIds[ch] = id;
};
function getUstId(ch){
    return this.ustChIds[ch];
};
function getUstreamChannelId(ch){
    var retNode = document.getElementById('ustid');
    if(!getUstId(ch)) {
        document['cb'] = function(id) {
        if(id){
            setUstId(ch, id);
            retNode.value = id;
        } else
        retNode.value = 'error';
        };
        addScript('https://api.ustream.tv/json/channel/' +
             encodeURIComponent(ch) +
             '/getValueOf/id?callback=document.cb');
    }else
    retNode.value = getUstId(ch);
};
function addScript(url){
    var obj = document.createElement("script");
    obj.src = url;
    obj.type= 'text/javascript';
    obj.charset='utf-8';
    document.getElementsByTagName("head")[0].appendChild(obj)
}
function openwin(url, w, h) {
    l=1680-w;t=1050-h;
    window.open(url, "", "width=" + w + ",height=" + h + ",left=" + l + ",top=" + t + "location=no,resizable=yes");
}
function openwin2() {
    if(document.getElementById('ustid').value=="error"){document.getElementById('ustid').value=""};
    var url="Ustream.htm?ustch=" +document.getElementById('ustch').value+ "&ustid=" +document.getElementById('ustid').value;
    openwin(url, 365, 233);
}
function newustid() {
    getUstreamChannelId(document.ust.ustch.value);
    setTimeout('openwin2()',500);
}
//-->
</script>
<form id="ust" name="ust">
チャンネル名：<input type="text" value="" id="ustch" name="ustch" style="font-size:12px;width:100px;">
<input type="hidden" value="" id="ustid" name="ustid">
<span class="click" onclick="newustid();" style="font-size:12px;cursor:pointer;color:blue;">表示</span>
</form>

　Ustream.htmのソース：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>USTREAM</title>
<style type="text/css">
<!--
a{text-decoration:none;}
a:hover{color:red;text-decoration:underline;}
a:hover[name] {text-decoration:none;}
.click{cursor:pointer;color:blue;}
.click:hover{color:red;text-decoration:underline;}
-->
</style>
<script type="text/javascript">
var ustChIds = new Object();
function setUstId(ch, id){
    ustChIds[ch] = id;
};
function getUstId(ch){
    return this.ustChIds[ch];
};
function getUstreamChannelId(ch){
    var retNode = document.getElementById('ustid');
    if(!getUstId(ch)) {
        document['cb'] = function(id) {
        if(id){
            setUstId(ch, id);
            retNode.value = id;
        } else
        retNode.value = 'error';
        };
        addScript('https://api.ustream.tv/json/channel/' +
             encodeURIComponent(ch) +
             '/getValueOf/id?callback=document.cb');
    }else
    retNode.value = getUstId(ch);
};
function addScript(url){
    var obj = document.createElement("script");
    obj.src = url;
    obj.type= 'text/javascript';
    obj.charset='utf-8';
    document.getElementsByTagName("head")[0].appendChild(obj)
}
function newsrc() {
    var url="http://www.ustream.tv/embed/" +document.ust.ustid.value+ "?html5ui=1";
    document.getElementById("Ustream").src = url;
}
function openwin(url, w, h) {
    l=1680-w;t=1050-h;
    window.open(url, "", "width=" + w + ",height=" + h + ",left=" + l + ",top=" + t + "location=no,resizable=yes");
}
</script>
</head>
<body style="margin:2px;">
<iframe width="360" height="203" src="" style="border: 0px none transparent;" name="Ustream" id="Ustream" title="Ustream埋め込み"></iframe>
<form id="ust" name="ust">
<a href="http://www.ustream.tv" style="font-size: 12px; line-height: 20px; font-weight: normal; text-align: left;" target="_blank">Ustream</a>
<input type="text" value="" id="ustch" name="ustch" style="width:110px;">
<span class="click" onclick="getUstreamChannelId(document.getElementById('ustch').value);" style="font-size:12px;">ID確認</span>
<input type="text" value="" id="ustid" name="ustid" style="width:60px;">
<span class="click" onclick="newsrc();" style="font-size:12px;">開く</span>
<span class="click" onclick="openwin('Ustream.htm',365,233);" style="font-size:12px;">追加</span>
</form>
<script type="text/javascript">
var x = location.search;
document.getElementById("ustch").value = decodeURI(x.substring(x.indexOf("ustch=")+6,x.indexOf("&")));
document.getElementById("ustid").value = x.substring(x.indexOf("ustid=")+6);
if(document.getElementById("ustid").value!=""){newsrc();};
</script>
</body>
</html>


2015-09-21 20:19  nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ：moblog

nice! 0

コメント 0

コメントを書く

お名前：[必須]
URL：
コメント：
画像認証：
下の画像に表示されている文字を入力してください。

トラックバック 0

ツイッターでブックマークレットが使えなく..｜Firefox 41.0.2でShock.. ブログトップ

文字拡大 (ページ移動後は「保存サイズ」を押して)

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。