자바스크립트 타이머! setTimeout(), setInterval(), 좀 있다 꺼줄래? 그리고 랜덤으로 유튜브 리스트 실행 해 주고.

2019/02/24 - [각 종 it/티스토리 등 프로그래밍] - 셔플로 시작하고 반복 재생하는 유튜브 플레이리스트, randomtube

셔플로 시작하고 반복 재생하는 유튜브 플레이리스트, randomtube

일전에 랜덤튜브를 소개 한 적이 있다. embeded로 유튜브를 이용 할 때 랜덤으로 플레이리스트를 작동하는 코드가 더 이상 작동하지 않아, 넣은 사이트인데, 이 사이트도 더 이상 작동하지 않는다.

오랜만에 랜덤으로 유튜브 리스트를 재생 할 일이 있어, 걍 유튜브 API를 사용하기로 했다.

예를 들어..

 

위 동영상 처럼 api를 이용하면, 해당 페이지를 load 할 때 마다 새로운 동영상를 랜덤으로 제시 해 준다.

해당 코드는 anime, vod, webtoon&manga 각 페이지에 적용하여 해당 페이지에 들어 갈 때마다 애니, 영화, 웹툰 등을 랜덤으로 제시 해 준다. 못 믿겠으면 F5눌러봐라, 누를 때 마다 새로운 음악이 나올테니까.

 

근데 그게 자바스크립트 타이머와 무슨 상관이에요?

방금 언급 한 페이지들은 여러가지 검색 할 수 있는 페이지다. 즉, 랜덤으로 작품들을 소개 해 주기 위해 만든 공간이 아니라, 여러 영상매체들을 검색 해서 볼 수 있게끔 만든 페이지이므로 계속 재생 되면 곤란하지 않겠는가? 그래서 29초 후에 정지 하도록 만들었다. 그 구문이 바로 자바스크립트 타이머인

setTimeout() 이다.

setTimeout(실행 할 내용,시간)은 특정 시간이 지나면 한번, 특정 행위를 실행하게끔 하는 자바스크립트 함수다.

이와 비슷한 함수는 setInterval(실행 할 내용, 시간)이 있다.

이 둘의 차이점은?

타임아웃은 한번이지만 인터벌은 지정한 시간이 지날 때마다 그 행위를 실행한다.

즉, 님이 보는 이로 하여금 약올리기 위해서라면 인터벌을 사용하여, 5초마다 영상을 정지 하는 마법(?)을 걸어 놓으면 된다.

자, 예시 보여줄까?

setTimeout(function() {player.pauseVideo();}, 29000);

필자는 위 구문을 유튜브 재생 자바스크립트에 넣었다. 해석 해 보자면, 29초 후에 유튜브를 정지하라는 의미다.

 

왜? 29초에요?

어, 30초 되면, 유튜버 수익으로 이어지거덩...

ㅡㅡ

기 보다는 아무래도 뜻하지 않는 영상이 계속 돌면 가독성에 영향을 줄까봐 그렇게 해 놨다.

님들도 만약 블로그나 카페에 배경음악을 넣고 싶다면, 유튜브 api를 이용하여 만들면 된다.

검은 고양이를 따라가면, 2020/12/04 - [각 종 it/티스토리 등 프로그래밍] - 클릭 반응형 웹페이지, 클릭하면 고양이가 사라진다?!

클릭 반응형 웹페이지, 클릭하면 고양이가 사라진다?!

랜덤으로 애니나 영화, 만화나 웹툰 등을 추천하니 한번 눌러봐라.

참고로 그 페이지들은 소리를 없앤 것도 있다.

그것도 다 가독성을 위한 것이다.