Embedding Vimeo Player

module bundler 이용하기

//import한 Player가 플레이어 생성자임.
import Player from '@vimeo/player'

const VimeoCT = () => {

  useEffect(() => {
    //플레이어 옵션 설정
    const options = {
      id: 479517196, //vimeo 영상 번호
      width: 500, //플레이어 가로
      controls: true,
      loop: true, //반복재생
      autoplay: false, //자동실행
      portrait: false, //vimeo 프로필 초싱화
      title: false, //영상 타이틀 출력
    }

		// 플레이어 객체 생성
		// id:'divVimeo' 를 가진 <div> 혹은 <iframe>에 플레이어가 생성된다.
    const myPlayer = new Player('divVimeo', options)

		//각종 이벤트 핸들러 등록
    myPlayer.on('play', (data)=>{console.log("play : ", data)});
    myPlayer.on('playing', (data)=>{console.log("playing : ", data)});
    myPlayer.on('pause', (data)=>{console.log("pause : ", data)});
    myPlayer.on('ended', (data)=>{console.log("ended : ", data)});
    myPlayer.on('timeupdate', (data)=>{console.log("timeupdate : ", data)});
    myPlayer.on('progress', (data)=>{console.log("progress : ", data)});
    myPlayer.on('seeking', (data)=>{console.log("seeking : ", data)});
    myPlayer.on('seeked', (data)=>{console.log("seeked : ", data)});
   }, [])

  return (
    <div id="divVimeo">
			{/* 여기에 플레이어 생성됨. */}
		</div>
  )
}

oEmbed 로 영상 임베드 하기

• 공식문서 : https://developer.vimeo.com/api/oembed/videos