[youtube] 동영상 플레이 하는 목록 / 화면 만들어보기

구현된 페이지

 

캐나다온라인 수업

캐나다온라인 수업, 캐나다고등학교 내신관리, 수학, 과학,영어,사회 토플 SAT 시험대비

http://online.ige.kr/?page=sample

 





기본 개념은 이러합니다. 

#1 Youtube의 영상 공유하기에서, 코드를 선택하면 Iframe 형태로 공유할 수 있습니다. 
#2 그 코드에서 고유 콘텐츠 값 만을 변경하여, 플레이 리스트를 만들어 봅니다. 

 

공유하기에서 코드를 선택하면 대략적으로 저런 코드가 나옵니다. 

여기서 src="https://www.youtube.com/embed/yvg6m2ZUoHg" 이 코드가 콘텐츠에 대한 주소이고, 여기서 yvg6m2ZUoHg 이 코드가 고유 콘테츠 코드라 할 수 있겠습니다. 

그럼 여기서 부터 시작합니다. 

	

		
수학강의 ( Grade 10, 11 )
		
화학 강의 ( Grade 11 )
		
고등학생 학업관리
	

동영상을 보여줄 Iframe과 리스트의 간략한 html 코드입니다. 

여기서 중요한 것은 



이 것입니다. 여기 data-url 에 다른 동영상들의 고유 코드 값을 넣어둡니다. 

data()의 활용법은 아래 링크 참고 해주세요. 

 

.data() | jQuery API Documentation

The .data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.

https://api.jquery.com/data/

 

Script 입니다. 
 

	$(".sampleMovieList ul li a").click(function(){
		
		var movSrc = 'https://www.youtube.com/embed/'+$(this).data('url')+'?autoplay=1';
		$("#sampleMovie").attr('src',movSrc);

		return false;
	});

$(".sampleMovieList ul li a").click(function(){

이 부분은 버튼을 클릭하는 동작입니다. 

$(this).data('url') 은 위의 html 코드에서 

여기에 넣어둔 고유 코드를 가져오는 부분입니다. 

$(this).data('url') 에서 $(this) 는 $(".sampleMovieList ul li a").click 이렇게 했으니 가능한 부분입니다. 

var movSrc = 'https://www.youtube.com/embed/'+$(this).data('url')+'?autoplay=1';

코드를 받아와서, Iframe에 들어갈 주소를 만듭니다. 

+'?autoplay=1'; 이 코드는 주소에 넣으면 자동으로 플레이가 됩니다. 

$("#sampleMovie").attr('src',movSrc); 

이 부분이 Iframe에 주소를 전달하는 부분입니다.