pip install 한 돔 객체 접근
407
작성한 질문수 4
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" />
답변 1
0
안녕하세요 :)
Template Refs로 참조된 객체에 접근하기 위해서는 컴포넌트가 DOM에 마운트된 이후에 접근하셔야 합니다 🙂
const videoRef = ref(null);
onMounted(() => {
console.log(videoRef.value); // 마운트 된 이후에 접근해야함
})(만약 Vue3 기본편을 수강하지 않으셨다면 꼭 보시는 것을 권장드립니다 👍)
0
<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를 적용 하려고 합니다.
외부의 버튼을 통해서 정지/재생 기능을 사용 하려고 합니다.
답변 주시면 감사하겠습니다.
0
코드를 보면 이상이 없어보니는데요
개발자도구에 오류가 없는지
코드에 오타가 없는지
테스트 하는 페이지가 코드가 많다면 새로 컴포넌트를 하나 만들어서 간단하게 테스트 해보는 것을 권장드립니다.
질문드립니다.
0
32
0
unplugin-vue-components 질문드립니다.
0
40
2
강의듣다가 헷갈려서 질문드립니다.
0
35
1
와 짐코딩님 강의 들으면서 느끼는게 많네요.
0
33
1
질문드립니다.
0
33
2
라우터 인스톨 후 실행안됨
1
50
2
코드 자동 포매팅 질문
0
71
2
필터 watchEffect 질문입니다.
0
52
1
json-server 오류가 다른게 뜨네요
0
114
1
미리보기가 안됩니당...
0
70
2
unplugin-vue-components
0
86
2
TypeError 질문
0
53
1
v-model="show" :show="show" 같이 사용?
1
58
1
hash 모드 배포의 필요성?
0
63
2
.eslintrc.cjs 가 없습니다
0
96
2
title,content값이 비어서 저장되는데 제가 혹시 어떤 부분을 잘못 작성했는지 ㅜㅜ 알고싶습니다.
0
98
3
_title_like: "", 문의드려요 해당 값을 설정하면 list가 아에 안나옵니다.
0
65
1
@click.prevent="params._page = pageNum"> 에 .value를 안쓰는 이유가 궁금합니다.
0
73
2
중첩된 컴포넌트 문제
0
76
2
교안에 있는 부분이 아닌가요?
0
109
2
useAxios Proxy(Object) RefImpl
0
114
1
axios timeout
0
332
3
강의와 상관은 없지만, 궁금한 점이 있어 질문드립니다.
0
124
2
컴포넌트 분리 부분에서 오류가 나요ㅠㅠ
0
169
2