트위치 트게더 Twitogether 91812191 김준희
제작목적 트위치의 커뮤니티 사이트인 트게더 서로 분리되어 있기 때문에 유동적으로 방송을 즐길수가 없음
템플릿 설명 아이프레임 url에 http://player.twitch.tv/?channel= 를 삽입하여 변수 호출시 해당 방송에서 플레이어 부분만 나오게 하였습니다 트게더를 iframe안에 넣으려니 xframe options때문에 불가능함 디시인사이드 인터넷방송갤러리로 대체하였습니다
스크립트 설명 js 부분에 $.이걸로 시작하는게 jquery라는 자바스크립트 라이브러리 이다 var twitchSearchValue 는 키워드를 저장하는 변수 자료형 string 입니다 twitch라는 ID를 사용하는 태그의 src속성값으로 http://player.twitch.tv/?channel=(사용자가 입력한 스트리머 ID)를 twitchSerchValue와 조합해서 사용하였습니다
스크립트 설명 ---- HTML ---- <input type="search" id="twitch-search-bar" placeholder="스트리머 ID 검색"> <!-- 사용자가 검색할 키워드 입력 --> <button class="search-submit" onclick="twitchSearchFunction()">트위치 검색</button> <!-- 클릭시 twitchSearchFunction() 함수 호출 --> <iframe id="twitch" src(unknown) frameborder="0" allowfullscreen="true"></iframe> ---- JS ---- var twitchSearchValue; // 키워드를 저장할 변수 자료형 String function twitchSearchFunction() { twitchSearchValue = $("#twitch-search-bar").val(); // 전역으로 선언한 TwitchSearchValue 변수에 사용자가 twitch-search-bar에 입력한 value 를 대입 $("#twitch").attr("src", "http://player.twitch.tv/?channel=" + twitchSearchValue); // twitch라는 ID를 사용하는 태그의 src속성값으로 http://player.twitch.tv/?channel=(사용자가 입력한 스트리머 ID)를 입력 }
Thank You