JWPLAYER

by fredd man

HTML

<script src="https://ssl.p.jwpcdn.com/6/12/jwplayer.js"></script>
<script src="https://apis.google.com/js/client.js?onload=onClientLoad"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
	<div class="search-container">
  <div class="search">
    <input id="queryInput" class="search-bar"  type="text">
    <button id="searchButton" class="search-button">
      GO
    </button>
  </div>
</div>

<div id="youtube-channel" class="main-container"> </div>
  
  
  
  
  
  
  <div id="player"></div>
	
	<section>
		<div class="seeker" data-start="0" data-end="5">Go to 0-5</div>
	</section>
	<section>
		<div class="seeker" data-start="6" data-end="15">Go to 6-10</div>
	</section>
	<section>
		<div class="seeker" data-start="16" data-end="25">Go to 15-25</div>
	</section>

JavaScript

jwplayer("player").setup({
	 	file: "https://player.vimeo.com/external/135492851.hd.mp4?s=a61836463fbde188aaa1e24e6bfeeb39&profile_id=113",
         startparam: "starttime",
	 });

$(function(){
    
    var player = jwplayer("player");
    var end = 32;

    player.onTime(function(event) {
        if(event.position >= end) {
            this.pause();
        }
    });

    $("section").each(function(){
        $(this).find(".seeker").on('click',function(event){
            end = $(this).data('end');

            player.seek(
                $(this).data('start')
            );
        });
    });

});










//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/embed/" + musicCard._id;
               ...