vue.js - NuxtJS/VueJS : How to know if page was rendered on client-side only?

Question

目前我为通用的 nuxtjs/vuejs 应用程序创建了一个 html5 视频播放器组件。
视频标签有一个自动播放属性，可以在导航到视频后启动视频。
通常浏览器不会在页面加载后直接执行此操作，这是被禁止的。
我需要在我的组件中使用一个变量来了解自动播放是否可以根据此信息对元素进行样式设置。
换句话说:如果当前页面仅在客户端呈现，则该变量应为 true，如果首先在服务器端呈现，则该变量应为 false。

无法使用“window.history.length”，因为刷新后也无法自动播放，尽管这不会影响历史长度。

此外，无法在“created”方法中设置变量，因为它也会在服务器端和客户端被调用。

Answer 1

在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() returns a Promise which is resolved when playback has been successfully started. Failure to begin playback for any reason, such as permission issues, result in the promise being rejected.

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

In your case, looks like your browser/os does not allow automatic playing of audio. The user agent (browser) or operating system doesn't allow playback of media in the current context or situation. This may happen, for example, if the browser requires the user to explicitly start media playback by clicking a "play" button. Here is the reference.