category: Google

JavaScript - YouTube API note

on 2013-12-20

JavaScript - YouTube API note

player demo YouTube JavaScript Player API Reference YouTube 嵌入式播放器参数 YouTube Embedded Players and Player Parameters YouTube Player API Reference for iframe Embeds

Use YouTube video must init a youtube player There have 2 player we can use

  • flash player
  • iframe player

I suggest use iframe player because it can support flash and HTML5 If use Apple mobile devices, they can’t support flash Use iframe player can solve this problem We can use javascript control player

This is a note to iframe API

embed script

<script src="https://www.youtube.com/iframe_api"></script>

JavaScript generate

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

1.First check load iframe API

function onYouTubeIframeAPIReady() {
    // do something
}

2.Init YouTube player

var player;
player = new YT.Player(
    'player',
    {
        width: '1280', // player width
        height: '720', // player height
        videoId: videoList[0], // youtube id ex: '0lfDNu-k6oo'
        playerVars: {
            rel: 1,
            autoplay: 0,
            disablekb: 0,
            showsearch: 0,
            showinfo: 0,
            controls: 1,
            wmode: 'opaque',
            hd: 1,
            html5: 1,
            iv_load_policy: 3
        },
        events: {
            'onReady'        : onPlayerReady,
            'onStateChange'  : onPlayerStateChange,
            'onError'        : error
        }
    }
);

playerVars can refer YouTube 嵌入式播放器参数

3.Handle onPlayerReady, onPlayerStateChange, error

function onPlayerReady(e) {
    // do something
}

function onPlayerStateChange(e) {
    // do something
}

function error(e) {
    // do something
}

Sample code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>youtube_iframe_api</title>
</head>
<body>
    <div id="player"></div>
</body>
<script>
    var player;

    function loadPlayer() {
        if (document.querySelector('#player')) {
            // get API
            var tag = document.createElement('script'),
            firstScriptTag = document.getElementsByTagName('script')[0];
            tag.src = 'https://www.youtube.com/iframe_api';
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            var videoList = [],
                playCount = 0;

            var video_ID = {
                'v_2': 'V8BTsiMxyaQ',
                'v_0': '7wvNwOPprBE',
                'v_1': 'mTSuiGubCHE',
                'v_8': 'DDs5bXh4erM',
                'v_3': 'n-BXNXvTvV4',
                'v_4': 'CRJDQQXS4uE',
                'v_5': 'ASO_zypdnsQ',
                'v_6': 'IZkYdqRWKaY',
                'v_7': '9Y15es8OY0U',
                'v_9': 'LWV-f6dMN3Q'
            };

            // videoList array
            for(var key in video_ID) {
                var value = video_ID[key];
                videoList.push(value);
            }

            function playChannel() {
                // init player
                player = new YT.Player(
                    'player',
                    {
                        width: '1280',
                        height: '720',
                        videoId: videoList[0],
                        playerVars: {
                            rel: 1,
                            autoplay: 1,
                            disablekb: 0,
                            showsearch: 0,
                            showinfo: 0,
                            controls: 1,
                            autohide: 0,
                            modestbranding: 0,
                            wmode: 'opaque',
                            hd: 1,
                            html5: 1,
                            iv_load_policy: 3
                        },
                        events: {
                            'onReady'        : onPlayerReady,
                            'onStateChange'  : onPlayerStateChange,
                            'onError'        : error
                        }
                    }
                );

                // play video
                function onPlayerReady(e) {
                    console.log('onPlayerReady');
                }

                function error(e) {
                    console.log('Error');
                    console.log(e);
                }
            }

            function onPlayerStateChange(e) {
                // get state
                console.log(e);

                // play list loop when video end play next video
                if (e.data === 0) {
                    playCount++;
                    if (playCount > (videoList.length -1)) {
                        playCount = 0;
                    }
                    player.loadVideoById(videoList[playCount]);
                    player.playVideo();

                }
            }

            function onYouTubeIframeAPIReady() {
                playChannel();
            }

            setTimeout(function() {
                onYouTubeIframeAPIReady();
            }, 1200);
        }
    }

    loadPlayer();
</script>
</html>

Refer - Force HTML5 youtube video

onError error code

  • 2 – The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks.
  • 5 – The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.
  • 100 – The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.
  • 101 – The owner of the requested video does not allow it to be played in embedded players.
  • 150 – This error is the same as 101. It’s just a 101 error in disguise!

Youtube Data api

Get video data api

http://gdata.youtube.com/feeds/api/videos/<youtube_id>

It return format is XML

http://gdata.youtube.com/feeds/api/videos/<youtube_id>?alt=json

It return format is json

参考指南：Data API 协议 Developer’s Guide: JSON / JavaScript Refer- How to ensure YouTube API only returns videos that are streamable on iPhone?

Something note

Player API 其中有個參數允許強制使用 HTML5 player 這建議有個好處與壞處 好處是不會有廣告 壞處是如果遇到訊源只有 flash 格式的影片 player 會重啟為 flash player 用 gData 抓影片資訊可抓到其中一個 content 的 key 其中就有提供此影片所帶有的格式 test page

  • 5 - HTTP URL to the embeddable player (SWF) for this video. This format is not available for a video that is not embeddable. Developers commonly add &format=5 to their queries to restrict results to videos that can be embedded on their sites.
  • 1 - RTSP streaming URL for mobile video playback. H.263 video (up to 176x144) and AMR audio.
  • 6 - RTSP streaming URL for mobile video playback. MPEG-4 SP video (up to 176x144) and AAC audio.

Refer - Reference Guide: Data API Protocol

實測在 mobile 裝置上(Android, iOS), 參數設定 autoplay 是無效的, 利用 JavaScript 控制讓 youtube 播放也是無效的, 必須用手去點擊播放

Read more

Google map api - research log

on 2013-12-03

Google map api - research log

Introduction

使用 Google Maps JavaScript v3 static map 嵌入地圖到網頁中以圖片方式呈現 使用限制 基本上不要一日載超過 25000 次都沒事 區域化 - 語系

Library

Init map

<!DOCTYPE html>
<!--使用 <!DOCTYPE html> 宣告，將應用程式宣告為 HTML5-->
<html>
<head>
<meta charset="utf-8">
<title>Google_map_api_basic</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!--最新的瀏覽器會將使用此 DOCTYPE 宣告的內容以「標準模式」呈現，也就是說，您的應用程式應更具備跨瀏覽器相容性。此外，DOCTYPE 也設計成會逐漸適應，但無法理解它的瀏覽器將會忽略它，而採用「快速模式」顯示內容。請注意，有些 CSS 在快速模式中可以運作，但在標準模式中卻無效。具體來說，所有百分比的大小都必須繼承父區塊項目，但這些上階中如有任何一個無法指定大小，就會假設為 0 x 0 像素大小。基於這個理由，我們加入了下列 <style> 宣告-->
<style type="text/css">
html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
#map_canvas {
    height: 100%;
}
</style>
<!--這個 CSS 宣告表示地圖容器 <div> (名為 map_canvas) 應使用 HTML 主體的 100% 高度。請注意，我們也必須特別宣告 <body> 和 <html> 的這些百分比-->
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
<!--使用 script 標記來涵蓋 Maps API JavaScript-->
<!--請注意，我們也必須設定 sensor 參數，以指出這個應用程式是否有使用感應器來判斷使用者的位置。必須明確地將這個值設為 true 或 false-->
</head>
<body onload="initialize()">
<!--從 body 標記的 onload 事件初始化地圖物件-->
  <div id="map_canvas" style="width:100%; height:100%"></div>
  <!--建立 div 元素 (名稱為「map_canvas」) 來容納「地圖」-->
</body>
<!--建立 JavaScript 物件實字以存放多個地圖屬性-->
<!--JavaScript 函式以建立「地圖」物件-->
<script type="text/javascript">
function initialize() {
    var myOptions = {
        center: new google.maps.LatLng(25.05060, 121.51870),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"),
        myOptions
    );
}

</script>
</html>

JavaScript map object

先建立地圖的設定 地圖選項

var myOptions = {
    center: new google.maps.LatLng(25.05060, 121.51870),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
  • center 表示一開始地圖的中心位置
  • zoom 地圖縮放(0 ~ 18)
  • mapTypeId 地圖類型
    • ROADMAP 顯示 Google 地圖的正常、預設 2D 地圖方塊。
    • SATELLITE 可顯示攝影地圖方塊。
    • HYBRID 可顯示混合攝影地圖方塊與重要地圖項 (道路、城市名稱) 的地圖方塊圖層。
    • TERRAIN 可顯示實際起伏的地圖方塊，以呈現海拔高度和水域圖徵 (山嶽、河流等)。

初始化地圖 地圖物件

var map = new google.maps.Map(
    document.getElementById("map_canvas"),
    myOptions
);

Mark Google map

標記 標記在地圖上的位置

// list marks
var arr = new Array(
    {
        position: new google.maps.LatLng(25.05060, 121.51870),
        title: 'Hello World!'
    },
    {
        position: new google.maps.LatLng(25.056304, 121.522079),
        title: '春漾咖啡'
    }
);

// put marks in map
for (var i = 0; arr.length-1 >= i; i++) {
    var marker = new google.maps.Marker(arr[i]);
    marker.setMap(map);
};

Info windows

infowindows

標記上的 pop tooltip

var infowindow = new google.maps.InfoWindow();

Method

  • setContent()
  • open()
  • close()

Properties

  • content
  • disableAutoPan
  • maxWidth
  • pixelOffset
  • position
  • zIndex

Event

事件 Google map api 提供許多與 map 有關的事件

Style

樣式標記地圖

Read more