사이냅 에디터 문서
Space shortcuts
Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 24 Next »

릴리즈 3.1.0 이상

'editor.upload.video.embedURLTransformers'에 도메인을 등록하면 해당 URL의 비디오를 업로드할 때 iframe으로 생성됩니다.

다음은 기본적으로 지원하는 Domain 설정으로 이외에는 비디오 태그로 생성됩니다.

synapeditor.config.js 
'editor.upload.video.embedURLTransformers': {
    'youtube.com': {
        pathParts: {
            'shorts': 'https://www.youtube.com/embed/{id}',
            'live': 'https://www.youtube.com/embed/{id}',
        },
        parameters: {
            'v': 'https://www.youtube.com/embed/{id}'
        }
    },
    'youtu.be': {
        pathParts: {
            '': 'https://www.youtube.com/embed/{id}'
        }
    },
    'tv.naver.com': {
        pathParts: {
            'v': 'https://tv.naver.com/embed/{id}',
            'l': 'https://tv.naver.com/embed/{id}'
        }
    },
    'tv.kakao.com': {
        pathParts: {
            'livelink': 'https://play-tv.kakao.com/embed/player/livelink/{id}',
            'cliplink': 'https://play-tv.kakao.com/embed/player/cliplink/{id}',
            'v': 'https://play-tv.kakao.com/embed/player/cliplink/{id}'
        }
    },
    'play-tv.kakao.com': {
        pathParts: {
            'livelink': 'https://play-tv.kakao.com/embed/player/livelink/{id}',
            'cliplink': 'https://play-tv.kakao.com/embed/player/cliplink/{id}',
            'v': 'https://play-tv.kakao.com/embed/player/cliplink/{id}'
        },
    },
    'chzzk.naver.com': {
        pathParts: {
            'clips': 'https://chzzk.naver.com/embed/clip/{id}'
        }
    },
    'vod.sooplive.co.kr': {
        pathParts: {
            'player': 'https://vod.sooplive.co.kr/player/{id}/embed'
        }
    },
    'play.sooplive.co.kr': {
        pathParts: {
            '': 'https://play.sooplive.co.kr/lcg0935/280079054/embed'
        }
    },
    'vimeo.com': {
        pathParts: {
            '': 'https://player.vimeo.com/video/{id}'
        }
    },
    'player.vimeo.com': {
        pathParts: {
            'video': 'https://player.vimeo.com/video/{id}'
        }
    },
}
구성설명예시
pathParts

URL에서 ID 앞에 위치한 경로(Path)를 설정합니다.
해당 경로가 있는 경우 변환할 embedTemplate 설정합니다.

synapeditor.config.js
'youtu.be': {
    pathParts: {
        '': 'https://www.youtube.com/embed/{id}' // 도메인 바로 뒤에 ID가 있는 경우
    }
}


synapeditor.config.js
'youtube.com': {
  pathParts: {
        'shorts': 'https://www.youtube.com/embed/{id}', // ID가 'shorts' 뒤에 있는 경우
        'live': 'https://www.youtube.com/embed/{id}'  // ID가 'live' 뒤에 있는 경우
    }
}
parameter

URL에서 ID가 특정 키의 값으로 설정된 파라미터를 의미합니다.

해당 키가 있는 경우 변환할 embedTemplate 설정합니다.

embedTemplate

URL을 embed 형태로 변환하기 위한 템플릿입니다.

  • embedTemplate: 'https://youtube.com/embed/{id}' - ID를 이용해 embed 형태의 YouTube URL로 변환

embedTemplate 형태로 URL을 변환할 때 기존 Domain과 변환된 URL의 Domain이 달라질 경우,

editor.upload.video.embedURLTransformers에 새로운 Domain을 등록해야 비디오를 iframe으로 생성할 수 있습니다.

ex)

synapeditor.config.js
'editor.upload.video.embedURLTransformers': {
    'youtu.be': {
        pathParts: {
            '': 'https://www.youtube.com/embed/{id}'
        }
    },
    'youtube.com': {
        pathParts: {
            'shorts': 'https://www.youtube.com/embed/{id}',
            'live': 'https://www.youtube.com/embed/{id}',
        },
        parameters: {
            'v': 'https://www.youtube.com/embed/{id}'
        }
    }
}

https://youtu.be/-VI9Jp5807s URL을 https://www.youtube.com/embed/-VI9Jp5807s로 변환했을 때, 도메인이 youtu.be에서 www.youtube.com으로 변경됩니다.

이 경우, www.youtube.com을 editor.upload.video.embedURLTransformers에 등록해야 iframe으로 생성됩니다.

원본 URL변환된 URL미리보기
https://youtu.be/-VI9Jp5807s


https://www.youtube.com/embed/-VI9Jp5807s


  • No labels