Youtube Player 블로그에 가지고와서 컨트롤 하기. webSQL 적용.

연습 2016. 8. 29. 17:46

 webSQL이라는 것은 Web 버전의 데이터 베이스라고 이해하면 된다.


 서버에서 사용되는 데이터 베이스가 아닌 해당 브라우져의 데이터 베이스이기 때문에 쿠키랑은 차별된 정보가 존재한다.


 단점은 각 브라우져에게 데이터 베이스가 공유되지 않는 단점이 있다.(확인 결과 익스플로러는 최신 버전에서도 될 수 있을지 생각해봐야 될것이다.


 전체 소스


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
  <body>
    <div id="player" style="position:fixed; bottom:10px; z-index:10; right:10px;"></div>
    <script>
      var db;
      
      var url;
      
      var tag = document.createElement("script");
 
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName("script")[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      
      db = window.openDatabase("myDB","1.0", "테스트용DB", 1024*1024);
      
      db.transaction
      (
        function(tx)
        {
            tx.executeSql("create table YoutubeListData(video,currentTime)");
        }
      );
      
      var player;
      
      function onYouTubeIframeAPIReady() {
        player = new YT.Player("player", {
          height: "400",
          width: "600",
          playerVars: { "autoplay": 0, "controls": 1 },
          events: {
            "onReady": onPlayerReady,
            "onStateChange": onPlayerStateChange,
            "onError": onPlayerError,
          }
        });
      }
      
      function onPlayerReady(event) {
            player.cuePlaylist({
                        list:"UUI0Ai1RoRD-b8i-qvRR0Yeg",
                        listType:"playlist",
                        index:"0",
                        suggestedQuality:"default"
                    });
      }
      
      function onPlayerError(event) {
        console.log("Error"+event);
      }
 
      var done = false;
      var play = false;
      var name = 0;
      var currentTimer = null;
      
      function onPlayerStateChange(event) {
        
        switch(event.data)
        {
            case -1:
            case 2:
            case 3:
                clearInterval(currentTimer);
                break;
            case 0:
                break;
            case 1:
                url = player.getVideoUrl();
                url = url.substring(url.indexOf("v=")+2,url.length);
                db.transaction
                (
                    function(tx)
                    {
                        tx.executeSql("update YoutubeListData set video=? where rowid=1",[url]);
                    }
                );
                currentTimer = setInterval(consoleCurrentTime,500);
                break;
            case 5:
                url = player.getVideoUrl();
                url = url.substring(url.indexOf("v=")+2,url.length);
                
                db.transaction
                (
                    function(tx)
                    {
                        tx.executeSql("SELECT * FROM YoutubeListData", [], function (tx, results) {
                            var len = results.rows.length;
                            if(len == 0)
                            {
                                tx.executeSql("INSERT INTO YoutubeListData (video,currentTime) VALUES ('"+url+"', 0)");
                            }
                            else
                            {
                                var index = player.getPlaylist().indexOf(results.rows.item(0).video);
                                player.playVideoAt(index);
                                player.seekTo(results.rows.item(0).currentTime);
                            }
                        }, null);
                    }
                );
                
                player.playVideo();
                break;
        }
      }
      
      function nextVideo(){
        player.addEventListener("onStateChange",onPlayerStateChange);
        player.nextVideo();
      }
      
      function consoleCurrentTime(){
        db.transaction
        (
            function(tx)
            {
                tx.executeSql("update YoutubeListData set currentTime=? where rowid=1",[player.getCurrentTime()]);
            }
        );
      }
      
    </script>
  </body>
</html>
 
cs


 과거에 Youtube Player을 연결한 것은 블로그가 iframe을 하지 않는 이상은 제대로 동작을 하지 못하는 단점이 있었다.(그래서 처음 부터 동영상을 봐야되는 단점이 있음.)


 이것을 webSQL을 이용해서 처리한 것이다.(어짜피 Youtube Player Javascript API는 크롬 및 기타 브라우져에서만 제대로 동작한다.)


 동작되는 예시는 현재 적용한 블로그의 형태를 보면 이해가 될 것이다.



저작자표시

'연습' 카테고리의 다른 글

Hostinger에 그누보드 설치하기.  (0) 2016.10.02
Hostringer 가입 및 호스팅 시작.  (0) 2016.10.01
C언어 파일 최대 길이 알아내기.  (0) 2016.08.15
mp4및 주소를 이용해서 플레이 가능한 장치 -MPC 소개-  (0) 2016.08.01
powershell로 하위 폴더 포함시켜서 파일 이동시키기.  (0) 2016.07.24
Posted by JunkMam
,

티스토리툴바