NuxtJS/VueJs: 페이지가 클라이언트 측에서만 렌더링되었는지 확인하는 방법

NuxtJS/VueJs: 페이지가 클라이언트 측에서만 렌더링되었는지 확인하는 방법

현재 범용 nuxtjs/vuejs 앱용 html5 비디오 플레이어 컴포넌트를 만들고 있습니다.비디오 태그에는 비디오로 이동한 후 비디오를 시작하는 자동 재생 속성이 있습니다.보통 브라우저는 페이지 로드 후 바로 그렇게 하지 않습니다. 금지되어 있습니다.이 정보를 기반으로 요소를 스타일링할 수 있는 자동 재생이 가능한지 여부를 알기 위해 구성 요소에 변수가 필요합니다.즉, 다음과 같습니다.현재 페이지가 클라이언트측에서만 렌더링된 경우 변수는 true여야 하며, 먼저 서버측에서 렌더링된 경우 false여야 합니다.

"window"로 작업할 수 없습니다.history.length"를 선택합니다.이는 자동 재생이 이력 길이에 영향을 주지 않지만 새로 고침 후에는 사용할 수 없기 때문입니다.

또한 "작성" 메서드는 서버 측 및 클라이언트 측에서도 호출되므로 변수를 설정할 수 없습니다.

nuxt - 이 있습니다.<client-only>클라이언트 측에서만 구성 요소를 렌더링하는 구성 요소

<template>
  <div>
    <sidebar />
    <client-only placeholder="Loading...">
      <!-- this component will only be rendered on client-side -->
      <comments />
    </client-only>
  </div>
</template>

Nuxt에는 다음과 같은 것이 있습니다.asyncData실행하다beforeCreate()서버측에서 데이터를 취득할 수 있습니다.asyncData컴포넌트를 장착하기 전에.

또는 다음 웹 사이트를 체크할 수 있습니다.created()예를 들어, 프로세스를 위한 것입니다.

created() {
  if (process.client) {
    // handle client side
  }
}

---

편집하다

https://stackoverflow.com/a/53058870/2312051

Audio.play()는 재생이 정상적으로 시작되었을 때 해결된 Promise를 반환합니다.허가 문제 등 어떠한 이유로도 재생을 시작하지 않으면 약속은 거부됩니다.

const playedPromise = video.play();
if (playedPromise) {
  playedPromise.catch((e) => {
    if (e.name === 'NotAllowedError' ||
        e.name === 'NotSupportedError') {
        //console.log(e.name);
    }
  });
}

사용하시는 브라우저에서는 자동 오디오 재생이 지원되지 않는 것 같습니다.사용자 에이전트(브라우저) 또는 운영 체제에서 현재 컨텍스트 또는 상황에서 미디어를 재생할 수 없습니다.예를 들어 브라우저가 사용자가 "재생" 단추를 눌러 미디어 재생을 명시적으로 시작하도록 요구하는 경우 이 문제가 발생할 수 있습니다.여기 참고 자료가 있습니다.

생각할 수 있는 해결책 중 하나는 Vue 라우터 엔트리의 길이를 취득하는 것입니다.이것은 현재 수동으로 추적하지 않으면 불가능할 것 같습니다.마지막으로 레이아웃 컴포넌트에 다음 코드를 입력했습니다.

watch: {
  $route () {
    Vue.prototype.$navigated = true
  }
}

$navigated 값은 정의되지 않았거나 true이므로 레이아웃에서 비디오 자동 재생이 가능한지 여부를 알고 있습니다.

언급URL : https://stackoverflow.com/questions/61747371/nuxtjs-vuejs-how-to-know-if-page-was-rendered-on-client-side-only