hpapi.blogspot.jp: Javascript

ラベル Javascript の投稿を表示しています。すべての投稿を表示

2015年10月31日土曜日

nextVideo

previousVideo

playVideo

stopVideo

pauseVideo

seekTo30

mute

volumeP

volumeM

2015年10月26日月曜日

YouTube Player API

class player{
public function player(){
if(array_key_exists('t',$_REQUEST)
and array_key_exists('l',$_REQUEST)
and array_key_exists('url',$_REQUEST)){
$this->urltime = $_GET['t'];
$this->playlist = $_GET['l'];
$this->yturl = $_GET['url'];
$this->yturl_3item = $this->para($_GET['url']);
$temp = array();
foreach ($this->yturl_3item as $val){
$temp[count($temp)] = sprintf("'%s'",$val);
}
$this->list_item = '['.implode(",",$temp ).']';
$this->you_player_api($this->playlist,$this->yturl_3item[0],$this->list_item);
}else{
$this->you_player_api('PLvswSo32Xlu_tBfEDzpuFQ-lUFP1_Aq5I','_sQSXwdtxlY','["GLyYUyVH2PI","RgKAFK5djSk"]');
}
}

public function player_area(){
$div_area = sprintf('<div id = "player_area" >
<div id = "player"></div>
</div>
');
echo $div_area;
}

public function debug_show(){
echo '<pre>';
echo $this->urltime;
echo '<br>';
echo $this->playlist;
echo '<br>';
echo $this->yturl;
echo '<br>';
print_r( $this->yturl_3item);
echo $this->yturl_3item[0];
}

public function para($url){
$temp=array();
$temp2=array();
$temp=explode('=',$url);
$temp2=explode('|',$temp['1']);
return $temp2;
}

public function you_player_api($playlist,$videoid,$array_list){
$player = sprintf("
<script>
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
var playlist = '%s';
var videoid = '%s';
var array_list = %s;
var h = '240';
var w = '320'
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: h,
width: w,
videoId: 'CNNDRO3imrs',
playerVars:{
'controls':'1',
'disablekb':'0',
'playsinline':'0'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError':onPlayerError
}
});
}

function onPlayerReady(event) {
//event.target.cuePlaylist({list:'PLvswSo32Xlu9BOn94xy-Xd_mTsMIny639'});
var j = event.target.cuePlaylist({list:playlist});
console.log (j.length);
if(j.length == 0){
one_list_play(event.target);
}
}

function onPlayerStateChange(event) {
console.log('onPlayerStateChange');
console.log(player.getAvailableQualityLevels());
console.log(player.getPlaybackQuality());
event.target.setPlaybackQuality('tiny');
if(event.target.getPlayerState() === 5 ){
event.target.setSize(w,h);
var list_items = event.target.getPlaylist();
var list_index = list_items.indexOf(videoid);
if(list_index >-1 ){
//event.target.loadPlaylist({list:playlist,index:list_index,startSeconds:3});
event.target.playVideoAt(list_index);
}
if(list_index == -1 ){
//event.target.loadPlaylist({playlist:array_list});
one_list_play(event.target);
}
}
}

function one_list_play(event){
console.log('000111');
event.loadPlaylist({playlist:array_list});
}

function onPlayerError(event){
event.target.nextVideo();
console.log('onPlayerError');
}

</script>"
,$playlist,$videoid,$array_list);
echo $player;
}
}

2015年10月24日土曜日

indexOf で配列に要素が含まれるか判定

indexOf で配列に要素が含まれるか判定

function onPlayerStateChange(event) {
if(event.target.getPlayerState() === 5 ){
var list_items = event.target.getPlaylist();
var list_index = list_items.indexOf(videoid);
event.target.cuePlaylist({list:playlist,index:list_index});
}
}

要素が含まれない場合 -1

2015年10月7日水曜日

CSSレイアウトを確認するために Javascript

ホームページのスタイルシート、レイアウトを確認するために Javascript です。

Chrome コンソールで利用します。CSS勉強のためです。

function s_new(){
this.div = function(){
eng("div");
}

this.ul = function (){
eng("ul");
}

this.li = function (){
eng("li");
}

this.user = function(e){
eng(e);
}

function eng (e){
var div = document.getElementsByTagName(e);
if (div.length > 0){
for(var a = 0 ; a < div.length; a++){
//div[a].style.borderStyle="solid";
//div[a].style.borderWidth="1px";
div[a].style.boxShadow ="2px 2px 6px";
}
}else{
console.log("none");
}
}
}

var x = new s_new;

例

ElementsByClassName

function eng (e){

var div = document.getElementsByClassName('a');

if (div.length > 0){

for(var a = 0 ; a < div.length; a++){

div[a].style.borderStyle="solid";

div[a].style.borderWidth="1px";

}

}else{

console.log("none");

}

eng();

2015年9月26日土曜日

覚えておく

覚えておく

function mobile_menu(){
var get = document.getElementsByClassName("menu_item");
for(var i in get){
if(get[i].childNodes){
console.log(i);
get[i].style.display="none";
}
}
}

この場合、if(get[i].childNodes) は必須な判断になります。そうしないと、

get の length、item、namedItem は除外されません、エラーになります。

2015年8月29日土曜日

JSON.parse() && JSON.stringify()

JSON.parse()

概要
JSON.parse() メソッドは文字列を JSON として解析し、また任意で解析によって作り出された値を変換します。

構文
JSON.parse(text[, reviver])

JSON.stringify()
概要
JSON.stringify() メソッドは JavaScript の値を JSON 文字列に変換します。置き換え関数を指定して値を置き換えたり、置き換え配列を指定して指定されたプロパティのみを含むようにしたりできます。

構文
JSON.stringify(value[, replacer[, space]])

2015年6月16日火曜日

javascript 無限ループする方法

javascript 無限ループする方法

その1
var j = 0;
for(;;){
console.log(j++);
}

その２
var j = 0;
do{
console.log(j++);
}while(true);

2015年6月10日水曜日

Chrome 開いているタブを選択する方法

Chrome 開いているタブを選択する方法
chrome.tabs.getAllInWindow（）

chrome.tabs.getAllInWindow(function(e){
console.log(e);
});

2015年6月1日月曜日

XMLHttpRequests のLogが表示するための設定

Chrome デフォルトの設定が変わったと思いますが、設定を変更しないと
XMLHttpRequests のLogが表示されない。

2015年5月28日木曜日

Javascript ページの繰り返しOpen.

Javascript ページの繰り返しOpen.

var x = {};
setInterval("opp()",50000);

function opp(){
x = open('http://yahoo.co.jp')
console.log('open');
setTimeout("cl()",5000);
}

function cl(){
x.close();
console.log('close');
}

2015年5月26日火曜日

chrome 拡張機能 CPU情報

chrome 拡張機能 CPU情報

chrome.system.cpu.getInfo(function(e){
console.log(e);
})

他
chrome.runtime.getManifest()
chrome.runtime.getPlatformInfo(function(e){console.log(e)})
chrome.system.cpu.getInfo(function(e){console.log(e);})
chrome.system.storage.getInfo(function(e){console.log(e);})

2015年4月10日金曜日

配列により、ページ上にあるDOMの操作

配列により、ページ上にあるDOMの操作

分かった事：
DOMの配列を削除後に、要素が変わります、次回の操作に影響が出ます。
削除しなくでも良い場合、無効にする。

練習1 (成功) 削除後に配列の順番が変わります。
while (document.getElementsByTagName('img')[0]){
imgelement = document.getElementsByTagName('img')[0];
imgelement.parentNode.removeChild(imgelement);
}

練習2 (失敗) 操作出来ないElementが発生します。
var imgelement = document.getElementsByTagName('img');
for ( var i = 1; i < imgelement.length ; i++){
imgelement[i].parentNode.removeChild(imgelement[i]);
}

練習3 (成功) 配列の要素が変わっていないので順番に操作出来ます。
var imgelement = document.getElementsByTagName('img');
for ( var i = 1; i < imgelement.length ; i++){
document.getElementsByTagName('img')[i].style.display="none";
}

2014年7月20日日曜日

XML名前空間 Javascript

XML名前空間 Javascript

document.documentElement.namespaceURI

element.getElementsByTagNameNS

与えられた名前空間に属し、与えられたタグの名前を持つ要素のリストを返します。

例：
document.getElementsByTagNameNS("http://itunes.apple.com/rss","image")

a=date.getElementsByTagName('entry')[0]
a.getElementsByTagNameNS('http://itunes.apple.com/rss','image');

2014年7月19日土曜日

javascript オブジェクト作成、プロパティ、メゾット

2014年4月29日火曜日

Youtube API 3.0 の応用

1. Youtube リスト作成、公開、List ID
2. 必要な曲を検索する、Video ID
3. Video ID を List ID に追加する。

https://www.youtube.com/user/icq7219388

2013年11月6日水曜日

setInterval(tt,3000) タイマをして、Function を実行する練習

setInterval(tt,3000) タイマをして、Function を実行する練習

<script type="text/javascript">

var x=0;
var time1=setInterval(tt,3000);
function tt(){
x=x+1;
alert(x);
}

</script>

タイマの停止
clearTimeout(timer1);

2013年10月27日日曜日

ページをリロード

ページをリロード

<script type="text/javascript">
var timer = "10000";
function ReloadAddr(){
window.location.reload();
}
setTimeout(ReloadAddr, timer);
</script>

2013年10月6日日曜日

setInterval　動かない

動く　　　　　setInterval(function(){mf_getymg();},10000);
動く　　　　　setInterval(mf_getymg,10000);
動かない　　setInterval(mf_getymg（）,10000);
動く setInterval('tt()',3000); クォーテーションで括る

function mf_getymg(){
var getmg=new XMLHttpRequest();
getmg.onreadystatechange=function(){
if (getmg.readyState==4 && getmg.status==200){
mf_test(eval(getmg.responseText));
}
}
getmg.open('GET','http://192.168.11.10/YahooAPI/List.php',true);
getmg.send(null);
}

function mf_test(mg){
var newli=document.createElement('li');
newli.innerHTML=mg;
var ul=document.getElementById('test');
ul.appendChild(newli);
}

クォーテーションで括る
<script type="text/javascript">

var x=0;
setInterval('tt()',3000);
function tt(){
x=x+1;
alert(x);
}

</script>

2013年8月26日月曜日

Flickr ファイル検索、Javascript,

1.
key=e2d7f5575339924addac8fd8a3584035
を入れ替えが必要です。下記のリンクをご参考ください。
http://www.flickr.com/services/api/explore/flickr.photos.search

2.
WindowsXDomainRequest() responseText取得したデータの取り扱い
は不明、要確認。

<html>
<meta>
</meta>
<body>

<form id="flickr">
<input type="text" value="写真" onblur="ffun(this)"/><p>キーワード入力</p><br>
</form>

<script type="text/javascript">
function ffun(val){
var key=val.value;
link(key);
}

function link(key){
key=encodeURIComponent(key);
var url1="http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=e2d7f5575339924addac8fd8a3584035&text="+key+"&format=rest";

if(navigator.userAgent.indexOf('MSIE')>-1){
winxxml(url1);
}else{
xxxml(url1);
}
}

function winxxml(ulink){
var date;
alert(ulink);
date=new XDomainRequest();
date.open('GET',ulink);
date.send();
alert(date.responseText);
}

function xxxml(ulink){
var date;
date=new XMLHttpRequest();
date.open('get',ulink,true);
date.send(null);
date.onreadystatechange=function(){
var ll=date.responseXML.getElementsByTagName('photo');
for(var i=0;i<ll.length;i++){
var aa=ll[i].getAttribute('farm');
var bb=ll[i].getAttribute('server');
var cc=ll[i].getAttribute('id');
var dd=ll[i].getAttribute('secret');
imglink(aa,bb,cc,dd);
}
}
}

function imglink(a,b,c,d){
document.write('<br>');
document.write('http://farm'+a+'.staticflickr.com/'+b+'/'+c+'_'+d+'.jpg');
}
</script>
</body>
</html>

2013年8月22日木曜日

XDomainRequest ドメイン間要求 (XDR) の概要（IE）

XDomainRequest

ドメイン間要求 (XDR) の概要

http://msdn.microsoft.com/ja-jp/library/dd573303(v=vs.85).aspx

例
<script type="text/javascript">
var xdr;
var ulink='http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=a2e61b747d51c0f4ba93c3f506e8ba3c&text=akb48&format=rest';

xdr=new XDomainRequest();
xdr.open('GET',ulink);
xdr.send();
alert(xdr.responseText);

</script>

登録: 投稿 (Atom)