[youtube] 동영상 플레이 하는 목록 / 화면 만들어보기
구현된 페이지 캐나다온라인 수업캐나다온라인 수업, 캐나다고등학교 내신관리, 수학, 과학,영어,사회 토플 SAT 시험대비http://online.ige.kr/?page=sample 기본 개념은 이러합니다. #1 Youtube의 영상 공유하기에서, 코드를 선택하면 Iframe 형태로 공유할 수 있습니다. #2 그 코드에서 고유 콘텐츠 값 만을 변경하여, 플레이 리스트를 만들어 봅니다. <iframe width="1000" height="562" src="https://www.youtube.com/embed/yvg6m2ZUoHg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>공유하기에서 코드를 선택하면 대략적으로 저런 코드가 나옵니다. 여기서 src="https://www.youtube.com/embed/yvg6m2ZUoHg" 이 코드가 콘텐츠에 대한 주소이고, 여기서 yvg6m2ZUoHg 이 코드가 고유 콘테츠 코드라 할 수 있겠습니다. 그럼 여기서 부터 시작합니다. <iframe id="sampleMovie" width="1000" height="562" src="https://www.youtube.com/embed/yvg6m2ZUoHg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><div class="sampleMovieList"> <ul> <li><a href="#" data-url='yvg6m2ZUoHg'>수학강의 ( Grade 10, 11 )</a></li> <li><a href="#" data-url='yvg6m2ZUoHg'>화학 강의 ( Grade 11 )</a></li> <li><a href="#" data-url='yvg6m2ZUoHg'>고등학생 학업관리</a></li> </ul></div>동영상을 보여줄 Iframe과 리스트의 간략한 html 코드입니다. 여기서 중요한 것은 <a href="#" data-url='yvg6m2ZUoHg'>이 것입니다. 여기 data-url 에 다른 동영상들의 고유 코드 값을 넣어둡니다. data()의 활용법은 아래 링크 참고 해주세요. .data() | jQuery API DocumentationThe .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 코드에서 <a href="#" data-url='yvg6m2ZUoHg'> 여기에 넣어둔 고유 코드를 가져오는 부분입니다. $(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에 주소를 전달하는 부분입니다.
calendar_today20-04-22 14:28
remove_red_eye4750
favorite1