Vue에서 비디오의 src를 동적으로 수정합니다.

Vue는 사용자 인터페이스를 쉽게 구축할 수 있게 해주는 인기 있는 JavaScript 프레임워크입니다. Vue에서는 데이터를 뷰에 쉽게 바인딩하여 일부 동적 데이터를 매우 간단하게 표시할 수 있습니다. Vue에서는 비디오 재생도 매우 편리하게 제어할 수 있습니다. 이 글에서는 Vue에서 비디오의 src를 동적으로 수정하는 방법을 소개합니다.

1. 비디오 초기화

먼저 Vue 구성 요소에서 비디오를 초기화하고 HTML 태그

<template>
  <div>
    <video ref="videoRef" width="640" height="360" :src="videoSrc" controls></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: "/test.mp4",
    };
  }
}
</script>

위의 예에서는 videoSrc가 비디오 소스의 주소를 나타내는 데이터 개체가 정의됩니다. Vue 구성 요소의 템플릿 태그에 비디오 태그를 생성하고 V-bind 지시문을 사용하여 videoSrc를 비디오의 src 속성에 바인딩했습니다. 이러한 방식으로 Vue는 초기화 후 videoSrc 값을 video 태그에 자동으로 채웁니다.

2. 비디오의 src를 동적으로 수정

이제 Vue 구성 요소에 비디오 태그를 생성하고 비디오 소스 주소를 src 속성에 성공적으로 바인딩했습니다. 앱 실행 중에 비디오 소스를 동적으로 수정하려면 $.refs.videoRef 속성을 사용할 수 있습니다.

<template>
  <div>
    <video ref="videoRef" width="640" height="360" :src="videoSrc" controls></video>
    <button @click="changeVideo()">修改视频</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: "/test.mp4",
    };
  },
  methods: {
    changeVideo() {
      this.videoSrc = "/newVideo.mp4";
      this.$refs.videoRef.load();
      this.$refs.videoRef.play();
    },
  }
}
</script>

위의 예에서는 버튼을 정의하고 클릭 이벤트를 여기에 바인딩했습니다. 사용자가 버튼을 클릭하면 ChangeVideo 메소드가 호출됩니다. 이 방법에서는 데이터 객체의 videoSrc 값을 동적으로 수정합니다. videoSrc 값이 변경되면 Vue 프레임워크는 video 태그의 src 속성을 자동으로 업데이트합니다. 그러나 video 태그는 새 비디오 스트림을 자동으로 다시 로드하지 않으므로 load() 메서드를 수동으로 호출하여 새 비디오 소스를 다시 로드하고 play() 메서드를 호출하여 재생을 시작해야 합니다.

3. Summary

이 글에서는 Vue에서 동영상의 src를 동적으로 수정하는 방법을 소개합니다. Vue 구성 요소에 비디오 태그를 생성하고 비디오 소스 주소를 src 속성에 바인딩하면 재생 가능한 비디오를 쉽게 렌더링할 수 있습니다. 애플리케이션이 실행되는 동안 비디오 소스를 동적으로 수정해야 하는 경우 $refs.videoRef 속성을 사용하여 비디오 태그에 대한 참조를 가져오고 load() 및 play() 메서드를 사용하여 새 비디오 소스를 다시 로드하고 재생합니다. .

위 내용은 Vue에서 비디오의 src를 동적으로 수정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!