-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
pip install 한 돔 객체 접근
23.07.03 10:10 작성 조회수 288
0
dom 객체 접근 하여 컨트롤 하려고 합니다.
https://videojs.com/guides/vue
여기 정보를 가지고 작성 했씁니다.
영상 재생은 잘 되는데 dom 객체에 접근하여 pause 를 하려는데
방법을 모르겠습니다.
<script setup> 에서 ref 객체로 dom 객체에 접근 하려는데 안되네요..
const videoRef = ref(null);
console.log(videoRef.value). // Null 이 찍히네요
<video-player ref="videoRef" :options="videoOptions" />
답변을 작성해보세요.
0
짐코딩
지식공유자2023.07.03
안녕하세요 :)
Template Refs로 참조된 객체에 접근하기 위해서는 컴포넌트가 DOM에 마운트된 이후에 접근하셔야 합니다 🙂
const videoRef = ref(null);
onMounted(() => {
console.log(videoRef.value); // 마운트 된 이후에 접근해야함
})(만약 Vue3 기본편을 수강하지 않으셨다면 꼭 보시는 것을 권장드립니다 👍)
joohyun kim
질문자2023.07.03
<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를 적용 하려고 합니다.
외부의 버튼을 통해서 정지/재생 기능을 사용 하려고 합니다.
답변 주시면 감사하겠습니다.
짐코딩
지식공유자2023.07.03
코드를 보면 이상이 없어보니는데요
개발자도구에 오류가 없는지
코드에 오타가 없는지
테스트 하는 페이지가 코드가 많다면 새로 컴포넌트를 하나 만들어서 간단하게 테스트 해보는 것을 권장드립니다.
답변 1