SPSTRAP Document API

Youtube base

Youtube - Mute

Youtube - Auto Play & Volume

Youtube - Loop

Youtube - Controler

Youtube - With Slider

<!-- 
                                슬라이더 영역
                                * 안타깝게도 loop = true 옵션은 사용할 수 없다.
                                * 슬라이더가 duplicate 될 때, 영상이 두개가 될 수 있으므로 
                                * 영상을 명시적으로 정의할 수 없고, 플레이가 초기화 된다.
                                * without duplicate 기능은 아직 지원하지 않는 듯 하다.

* 기본적으로 current slider 일때 재생된다.
                                * 즉 autoplay 옵션은 첫번째 슬라이더에 동영상이 있는 경우만 활성화된다.
                            -->
                            <div class="swiper-container sp--css-notready"
                                data-type="default"
                                data-swiper="
                                    slidesPerView = 1
                                    slidesPerColumn = 1
                                    autoplay-delay = 5000
                            ">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        
                                        
                                        <div class="sp--video"
                                            [layout="cover"]
                                            data-platform="youtube"
                                            data-controller="true"
                                            data-videoid="l3Vom3ISCNI"
                                            data-volume="10"
                                            data-loop="true"
                                        ></div>

</div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1000x500/f5f5f5/333&text=2"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1000x500/f5f5f5/333&text=3"></div>
                                    <div class="swiper-slide">
                                        
                                        
                                        <div class="sp--video"
                                            [layout="cover"]
                                            data-platform="youtube"
                                            data-controller="true"
                                            data-videoid="7uyw8IdRylM"
                                            data-volume="10"
                                            data-loop="true"
                                        ></div>

</div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1000x500/f5f5f5/333&text=4"></div>
                                    <div class="swiper-slide"><img src="https://placeholder.pics/svg/1000x500/f5f5f5/333&text=5"></div>
                                </div>
                            </div>

Class

name	description
.sp--video	비디오 컨테이너
.sp--video-btn	비디오 컨트롤 버튼 ( 내, 외부 )
.sp--video-controller	비디오 컨트롤 전체영역
.sp--video-remote	비디오 컨트롤 버튼영역 ( 내부 )
.sp--video-progress	프로그래스바 영역
.sp--video-progress-current	현재 재생된 영역을 표시하는 바
.sp--video-progress-loaded	로드가 완료된 영역을 표시하는 바
.sp--video-progress-total	전체 영역을 표시하는 바

Attribute

name	description
.data-platform	default: '' ( string ) youtube, vimeo 를 서비스 할 예정 ( 현재는 youtube만 가능 ) 플랫폼을 지정해주는 영역이다.
.data-controller=	default : 'false' ( boolean ) true 는 컨트롤러를 화면에 표시한다. 시작, 중지, 음소거, 프로그래스바 지원
.data-videoid	비디오의 ID를 입력하는 구간이다. 혹시 모르니, url 전체를 입력해도 가져올 수 있도록 개발했다.
.data-loop	default: 'false' ( boolean ) true일 경우 비디오가 반복 재생된다.
.data-mute	default: 'false' ( boolean ) true일 경우 음소거된다.
.data-volume	default: '50' ( number ) 볼륨의 크기를 설정한다. ( 숫자만 입력 가능 0 - 100 )

Useage

/*
 * import class
 */
import { 
    SP_VIDEO,
} from './modules.js';

/*
 * extends class
 */
_.video = SP_VIDEO;

Etc

이제 한 화면에 아주 많은 영상을 넣어도 괜찮을 것 같다.
어짜피 재생은 한개만 되고, 프로그래스 마찬가지 이므로 여러모로 활용하자.