pip install 한 돔 객체 접근

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

Vue3 플러그인 만들기

작성

369

dom 객체 접근 하여 컨트롤 하려고 합니다.

https://videojs.com/guides/vue

여기 정보를 가지고 작성 했씁니다.

영상 재생은 잘 되는데 dom 객체에 접근하여 pause 를 하려는데

방법을 모르겠습니다.

const videoRef = ref(null);

console.log(videoRef.value). // Null 이 찍히네요

<video-player ref="videoRef" :options="videoOptions" />

vue.js

답변 1

짐코딩

지식공유자

안녕하세요 :)

Template Refs로 참조된 객체에 접근하기 위해서는 컴포넌트가 DOM에 마운트된 이후에 접근하셔야 합니다 🙂

const videoRef = ref(null);
onMounted(() => {
  console.log(videoRef.value); // 마운트 된 이후에 접근해야함
})

(만약 Vue3 기본편을 수강하지 않으셨다면 꼭 보시는 것을 권장드립니다 👍)

joohyun kim

질문자

<script setup>
import { VideoPlayer } from '@videojs-player/vue';
import 'video.js/dist/video-js.css';
import { ref , onMounted} from 'vue';
import axios from 'axios';

const posts = ref([]);
const videoPlayerRef= ref({});
// const videoPlayerRef= ref(null); // null 출력됨

onMounted(async () => {
  // console.log('onMounted');
  console.log(VideoPlayer, 'aaaaaaaaaaa');
  console.log(videoPlayerRef, 'bbbbbbbbbb');
  console.log(videoPlayerRef.value, 'cccccc');

<video-player id="vidoePlayer01" ref="VideoPlayerRef" :options="videoOptions" @play="onPlay" @pause="onPause" @playing="handlePlaying" class="video-js" >
                </video-player>

onMount 한다음 실행 했습니다.

vue3 기본편, 실전편은 수강 했으며, 퀘이사 수강중입니다.

https://github.com/surmon-china/videojs-player

여기의 API를 적용 하려고 합니다.

외부의 버튼을 통해서 정지/재생 기능을 사용 하려고 합니다.

답변 주시면 감사하겠습니다.

짐코딩

지식공유자

코드를 보면 이상이 없어보니는데요

개발자도구에 오류가 없는지
코드에 오타가 없는지
테스트 하는 페이지가 코드가 많다면 새로 컴포넌트를 하나 만들어서 간단하게 테스트 해보는 것을 권장드립니다.

인프런 커뮤니티 질문&답변

pip install 한 돔 객체 접근