Jwplayer_cloudTest

testing cloudhost feature of jwplayer

by fredd man

HTML

<script src="http://jwpsrv.com/library/3bMFypKqEeKK7CIACqYeXg.js"></script>
<div id='my-video'></div> 
<br><div id="content">
           <button name='play' id='play' value='play' onclick='play();'>Play</button>
            <button name='pause' id='pause' value='pause' onclick='pause();' style='display: none;'>Pause</button>
        </div>

CSS

#my-video
{
    width:100% !important;
}

#content
{
     text-align: center;
    width:100px;
        height:50px;
    alignment-adjust: central;
}

JavaScript

//2016 mizTech NTU ESOE mikeZheng 
var musicCards = [];

$(document).ready(function() {
    //替按鈕綁上事件
    $("#searchButton").on("click", function() {
        var query = $("#queryInput").val();
        //簡單防呆一下
        if (query != "") {
            loadYoutubeService($("#queryInput").val());
            console.log(query + " 搜尋中..");
        }
    });
});

//向google 使用youtube服務
function loadYoutubeService(query) {
    gapi.client.load('youtube', 'v3', function() {
        gapi.client.setApiKey('AIzaSyCRwMuGP50aOvrptyXRZtveE50faOLb8R0');
        search(query);
    });
}
//搜尋
function search(query) {
    //對於搜尋上的其他功能可以參考googleapi
    //https://developers.google.com/youtube/v3/docs/search/list#maxResults
    var request = gapi.client.youtube.search.list({
        part: 'snippet',
        q: query,
        maxResults: 24
    });

    request.execute(function(response) {
        //將結果把所需部分進行擷取
        $.each(response.items, function(i, item) {
            if (!item['id']['playlistId']) {
                var musicCard = {};
                musicCard._id = item['id']['videoId'];
               //musicCard.player=
                musicCard.file= "https://www.youtube.com/watch?v=" + musicCard._id;
                musicCard.title = item['snippet']['title'];
                musicCard.url = "https://www.youtube.com/watch?v=" + musicCard._id;
                musicCard.description = item['snippet']['description'];
                musicCards.push(musicCard);
            }
        });
        // console.log(musicCards);
        //將VIEW抽出來另外生成
        renderView();
    });
}



function renderView() {
    var htmlString = "";
    musicCards.forEach(function(musicCard, i) 
    
    {
        var card = createCard(musicCard._id, musicCard.title, musicCard.description, musicCard.url);

        htmlString += card;
    });

    $('#youtube-channel').html(htmlString);

}



function createCard(_id, title, description, url,file) {
    var card =

    
        '<div class="card">' +
   ...