변수에 비디오 id를 할당하고 한 번에 재생하는 방법은 무엇입니까?

Question

나는 this 구성 요소를 사용합니다.

YouTube 비디오 ID 입력란을 만들고 "재생"버튼을 클릭하여 비디오 재생을 시작하고 싶습니다. 문제는 다음입니다 : "재생"을 클릭하면 ID가 videoId에 할당 된 것을 볼 수 있지만 실제로 비디오를 재생하려면 "재생"을 다시 클릭해야합니다.

그러나 videoId이 하드 코드 된 경우 (videoId: 'lG0Ys-2d4MA') 비디오는 play의 첫 번째 클릭부터 시작됩니다. 또한 입력의 v-model="videoId" (providedId이 아님) 비디오가 즉시 다운로드되며 play이 재생되기 시작하면 자동으로 다운로드 할 필요가 없습니다. input이 변경되면 - play을 클릭하여 비디오를 다운로드하고 싶습니다. 다음은

는 최소한의 재현 예를

템플릿

<input type="text" v-model="providedId"/> 
<button @click="playVideo">play</button> 
<youtube :video-id="videoId" ref="youtube"></youtube> 

스크립트입니다

export default { 
    data() { 
    return { 
    videoId: '', // <<-- empty srting 
    providedId: '' 
    } 
    }, 
    methods: { 
    playVideo() { 
     this.videoId = this.providedId // <<-- assign video id 
     this.player.playVideo() 
    }, 
    }, 
    computed: { 
    player() { 
     return this.$refs.youtube.player 
    } 
    } 
} 

비디오 "플레이"에 대한 첫 번째 클릭 후 재생되지 않는 이유는. 그것을 고치는 방법?

Answer 1

해결책을 찾았습니다.

템플릿

<input type="text"v-model="urlOrId"/> 
<button @click="playVideo">play</button> 
<youtube :video-id="videoId" :player-vars="playerVars" ref="youtube"></youtube> 

스크립트

export default { 
    data() { 
    return { 
     videoId: '', 
     urlOrId: '', 
     playerVars: { 
     autoplay: 1 
     } 
    } 
    }, 
    computed: { 
    player() { 
     return this.$refs.youtube.player 
    } 
    }, 
    methods: { 
    playVideo() { 
     // Extract id of the video from URL 
     if (this.urlOrId.search('youtube.com') !== -1) { 
     this.videoId = this.$youtube.getIdFromUrl(this.urlOrId) 
     } else { 
     this.videoId = this.urlOrId 
     } 

     this.player.playVideo() 
    } 
    } 
}