입력한 URL에 따라 비디오가 자동으로 포함된 방법

배경.

Form에 생방송 URL을 입력할 때 비디오를 자동으로 포함할 필요가 있으므로 설치 방법을 연구했습니다.
이번에는 트위치, 유튜브, 니코니코에 대응했다.

개요

입력한 URL은 정규 표현식으로 잘라서 붙여넣기<iframe>를 잘 넣습니다.<iframe>이쪽입니다.
https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe

애니메이션 내용별 삽입 방법

Twitch

공식document: https://dev.twitch.tv/docs/embed/video-and-clips/

<iframe src="https://player.twitch.tv/?channel=jornojovanni&autoplay=false"></iframe>

매립에 필요한 URL: https://player.twitch.tv/?channel=jornojovanni&autoplay=false

비고: 애니메이션의 자동 재생은 기본적으로 ON이므로 URL 끝에 &autoplay=false

를 붙여야 합니다.

Youtube

공식 문서:

<iframe src="https://www.youtube.com/embed/ANwf8AE3_d0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

매립에 필요한 URL:

ref

allow 속성의 매개 변수는 매우 많지만 이번에는 사용하지 않습니다

비고: 일반 영상이든 생방송의 삽입용 URL이든 똑같다

niconico

공식document: 이것 괜찮아요?

자세히 설명된 페이지를 찾을 수 없음

<script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/1453178722?w=490&h=307"></script>

공식적으로는 ↑이지만 실제로는 iframe을 나타낸다

<iframe src="http://embed.nicovideo.jp/watch/1453178722"></iframe>

.

매립에 필요한 URL: http://embed.nicovideo.jp/watch/1453178722

비고:niconico 애니메이션은 일반 애니메이션https://www.nicovideo.jp/video_top의 애니메이션만 지원합니다.커뮤니티 및 라이브에 대한 URL이 없습니다.

니코니코가 공식적으로 블로그 부품을 제공했지만 끼워 넣은 영상을 제공하지 않았기 때문이다.

해당 URL

http://twitch.tv/********
https://www.twitch.tv/********
https://go.twitch.tv/********
https://m.twitch.tv/********

https://youtu.be/********
https://www.youtube.com/watch?v=********
https://gaming.youtube.com/watch?v=********

https://nico.ms/sm********
https://www.nicovideo.jp/watch/sm********

"****"는 ID입니다.

설치 방법

function embedVideo(url: string) {
    const hostname = urlParser(url).hostname

    const matchesTwitch = url.match(/twitch\.tv\/([^#?/]+)/)
    if (/twitch\.tv$/.test(hostname) && matchesTwitch) {
        return 'https://player.twitch.tv/?channel=' + matchesTwitch[1] + '&autoplay=false'
    }

    if (/(youtube\.com|youtu\.be)$/.test(hostname) && !/\/user\//.test(url) && !/\/channel\//.test(url)) {
        const matches = url.match(/(\/watch\?v=|youtu\.be\/)([^#&?/]+)/)
        if (!matches) return ''
        return 'https://www.youtube.com/embed/' + matches[2]
    }

    if (/(nicovideo\.jp|nico\.ms)$/.test(hostname) && !/live/.test(hostname)) {
        const matches = url.match(/(\/watch\/|nico\.ms\/)([^#&?/]+)/)
        if (!matches) return ''
        return 'https://embed.nicovideo.jp/watch/' + matches[2]
    }
    return ''
}

Vue.js의 상황

Vue.Filters에 추가

filters: {
  embedVideo,
},

iframe의 src로 여과하면 됩니다.<iframe :src="url | embedVideo" allow="fullscreen"></iframe>

회전식 지원

.video
    position relative
    padding-bottom 56.25%

    & > iframe
        position absolute
        size 100% 100%
        border none

<iframe> 원형을 유지하면 사이즈가 변하지 않기 때문에position: absolute;로 띄우고 부요소에 같은 높이의padding을 취하면 가변적으로 변할 수 있다.
2021-06-02 보충aspect-ratio: 16/9;도 사용 가능합니다.하지만 사파리는 대응하지 않았다.
https://caniuse.com/?search=aspect-ratio