detail.html

<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>VideoRecomender</title>
	<style type="text/css">
    body{
      background: #339933;
      font-family:'微软雅黑,sans-serif';
    }
    #main{
      width:900px;
      margin-left:auto;
      margin-right:auto;
      margin-top:100px;
    }
    .player{
      width:500px;
      float:left;
    }
    #tagList{
      margin-top:100px;
			width:380px;
      float:left;
    }
    .item{
      padding-left:5px;
      padding-right:5px;
      line-height:30px;
      background:rgb(30,30,30);
      font-size:20px;
      color:white;
      text-align:center;
      float:left;
      margin-left:20px;
      margin-top:20px;
    }
	</style>
	<script src="jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    function cookie(name){
      var cookieArray=document.cookie.split("; ");
      var cookie=new Object();
      for (var i=0;i<cookieArray.length;i++){
        var arr=cookieArray[i].split("=");
        if(arr[0]==name)return unescape(arr[1]);
      }
      return "";
    };
    $(function(){
      var vid = cookie('vid');
      $.get('https://openapi.youku.com/v2/videos/show.json',{
        client_id:'9c528d4d804d3150',
        video_id:vid
      },function(data){
        var videoData = JSON.parse(data);
        var tags = videoData.category+','+videoData.tags;
        var videoTags = tags.split(',');
        videoTags.forEach(function(tag){
           var html = '<div class="item">'+tag+'</div>';
           $('#tagList').append(html);
        });
        if(cookie('uid')!=''){
          var vid = cookie('vid');
          var uid = cookie('uid');
          $.post('/addhistory',{
            uid: uid,
            vid: vid,
            tags: tags
            },function(data){
              console.log(data);
          });
        }
      });
    });
  </script>
  </head>
  <body>
  <div id="main">
    <div class="player">
      <div id="youkuplayer" style="width:480px;height:400px">
      </div>
      <script type="text/javascript" src="http://player.youku.com/jsapi">
        var vid = cookie('vid'); 
        player = new YKU.Player('youkuplayer',{
          styleid: '3',
          client_id: '9c528d4d804d3150',
          vid: vid
        });
      </script>
    </div>
    <div id="tagList">
    </div>
  </div>
  </body>
</html>