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

2016年1月27日水曜日

YouTube IFrame API ,再生リストの動作確認

YouTube IFrame API ,再生リストの動作確認、
以前に作成したプログラムは正常に停止しない、再び最初から
再生が始まります。そのための確認です。

今回のストップボイントは下記となります、各event.コード発生時に
実行します。

function stop(event){
     if(event.target.getPlaylist()){
        if(event.target.getVideoData().video_id == event.target.getPlaylist()[event.target.getPlaylist().length -1]) {
               event.target.stopVideo();
         }else{
               event.target.playVideo();
         }
    }
}




<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
// YouTube Player API Reference for iframe Embeds
// https://developers.google.com/youtube/iframe_api_reference
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '0',
width: '0',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError' : onPlayerError,
}
});
}

      // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
   console.log(event.target.getPlayerState());
player.cuePlaylist({list:'PLoxAMAuDB1YbftJRZtIlec92SFNAPTnjW'});
        event.target.playVideo();
    }



function onPlayerStateChange(event) {

console.log('event.target.getPlayerState()' + event.target.getPlayerState());
console.log('event.data' + event.data);
console.log('player.getPlaylistId()' + event.target.getPlaylistId());
console.log('player.getPlaylist()' + event.target.getPlaylist());
console.log('player.getPlaylistIndex()' + event.target.getPlaylistIndex());


if(event.target.getPlayerState() == 5){
stop(event);
console.log('5---' + event.target.getPlayerState());

}

if(event.target.getPlayerState() == 4){
stop(event);
console.log('4---' + event.target.getPlayerState());

}

if(event.target.getPlayerState() == 3){
stop(event);
console.log('3---' + event.target.getPlayerState());
}

if(event.target.getPlayerState() == 2){
stop(event);
console.log('2---' + event.target.getPlayerState());

}

if(event.target.getPlayerState()== 1){
stop(event);
console.log('1---' + event.target.getPlayerState());
//event.target.nextVideo();
}

if(event.target.getPlayerState() == 0){
stop(event);
console.log('0--' + event.target.getPlayerState());
}

if(event.target.getPlayerState() == -1){
console.log('-1--' + event.target.getPlayerState());
}
}

function onPlayerError(event){
if(event.target.getPlaylist()){
if(event.target.getVideoData().video_id == event.target.getPlaylist()[event.target.getPlaylist().length -1]) {
event.target.stopVideo();
}else{
event.target.nextVideo();
}
}
}


function stop(event){
if(event.target.getPlaylist()){
if(event.target.getVideoData().video_id == event.target.getPlaylist()[event.target.getPlaylist().length -1]) {
event.target.stopVideo();
}else{
event.target.playVideo();
}
}
 }


    function stop_play() {
console.log(event.target.getPlayerState());
player.stopVideo();
    }


 //player.cuePlaylist({list:'PLoxAMAuDB1YbftJRZtIlec92SFNAPTnjW'});
    </script>
  </body>
</html>
投稿者 時刻: 0 件のコメント:
ラベル:

2015年10月31日土曜日

YouTube 埋め込みプレーヤー

YouTube 埋め込みプレーヤー

nextVideo

previousVideo

playVideo

stopVideo

pauseVideo

seekTo30

mute

volumeP

volumeM

投稿者 時刻: 0 件のコメント:
ラベル: ,

2015年10月26日月曜日

YouTube Player API

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;
}
}








投稿者 時刻: 0 件のコメント:
ラベル: , ,

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







投稿者 時刻: 0 件のコメント:
ラベル: ,

2015年10月21日水曜日

cuePlaylist loadPlaylist 動画 ID と配列の利用について

cuePlaylist  loadPlaylist  動画 ID と配列の利用について

function onPlayerReady(event)
        event.target.loadPlaylist({playlist:['0rSPuLyKSGc','hXI8RQYC36Q','xxsDx55Nqfc']});
        event.target.loadPlaylist({list:'PL5l9iRZwq9Ul6s-10DMgPoc8sY3ukgbFz'});

    }



複数動画のIDでの配列を利用する場合、 パラメータは playlist を利用します。

動画リストのIDを利用する場合、 パラメータは list を利用します。

微妙に違いますが間違えると動画が再生されません。要注意です。
投稿者 時刻: 0 件のコメント:
ラベル:

2015年10月15日木曜日

YouTube IFrame API リンク

YouTube IFrame API  リンク


iframe 組み込みの YouTube Player API リファレンス
https://developers.google.com/youtube/iframe_api_reference



投稿者 時刻: 0 件のコメント:
ラベル:
登録: 投稿 (Atom)