【问题标题】：NextJS Videos not loading without a page refresh when the page is accessed via a link通过链接访问页面时，NextJS 视频不会在没有页面刷新的情况下加载
【发布时间】：2021-08-01 05:14:34
【问题描述】：

问题

嗨。当通过NextJS 链接访问嵌入了video 的页面时，muse.ai videos 不会在页面上加载。

我在 StackBlitz here 上有一个可重现的最小示例。

示例

如果您从page-index（其中包含video）开始，然后导航到page-2（其中还包含video），page-2-video 将不会加载video，除非page导航到它后会刷新。

在NextJS 应用程序中加载外部嵌入的内容可能会出现问题。

嵌入的视频组件和第二页的链接：

<main className={styles.main}>
  <div
    class="muse-video-player"
    data-video="pj4AW2W"
    data-logo="0"
    data-title="0"
    data-search="0"
    data-autoplay="1"
    data-loop="1"
    data-volume="0"
    data-width="100vw"
  />
  <script src="https://muse.ai/static/js/embed-player.min.js" />

  <Link href="/pagetwo">
    <a>PAGETWO</a>
  </Link>
</main>

应该呈现的内容：

实际上是什么：

如果您在两个页面之间导航并刷新页面，然后你就会明白了。

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

muse.ai 开发者在这里。这里的问题可能是您在渲染Home 组件后没有实例化播放器元素。

如果您有一个简单的静态页面，那么添加<script> 是可行的方法。它将等待 DOM 加载，查找任何具有 muse-video-player 类的元素并相应地呈现所有这些元素。但是，如果您有一个动态操作 DOM 的页面，这正是 React 所做的，那么通过 <script> 导入 lib 将不会有任何效果。

我建议添加一个简单的Player 组件，用于在渲染后实例化播放器。对于最基本的 React 应用程序，您需要以下两个步骤。

首先，在public/index.html 的<head> 中导入依赖：

<head>
  <!-- Other stuff -->
  <script src="https://muse.ai/static/js/embed-player.min.js"></script>
</head>

其次，定义一个组件，例如在src/Player.js中，并在组件挂载后实例化播放器。

import React from 'react';
import ReactDOM from 'react-dom';

class Player extends React.Component {
  componentDidMount() {
    var element = ReactDOM.findDOMNode(this);
    window.MusePlayer({
        container: element,
        video: this.props.video,
    });
  }

  render() {
    return <div class="muse-ai-player"></div>
  }
}

export default Player;

您现在可以在src/index.js 上为任意视频渲染播放器：

import React from 'react';
import ReactDOM from 'react-dom';
import Player from './App';

ReactDOM.render(
  <React.StrictMode>
    <Player video="pj4AW2W" />
    <Player video="VBdrD8v" />
  </React.StrictMode>,
  document.getElementById('root')
);

这是上面代码的最终结果：

【讨论】：

我正要实现这个！但是我确实想知道是否有等效的钩子/功能解决方案。
可以通过useEffect实现。然后，您可能应该将 [props.video] 作为第二个参数传递给 useEffect，以便只运行一次初始化逻辑，而不是在每次渲染后运行。
我在为生成的视频设置样式时遇到了一些问题。这是一个更新的示例：stackblitz.com/edit/nextjs-x13dy2?file=Components%2FPlayer.js。尽管设置了道具，但我不确定如何设置视频尺寸以始终加载全宽度或自动播放。
我看到了几个问题。首先，将属性传递给<Player> 组件时，不应使用data- 前缀。只需使用width="100%" 等。其次，您的 CSS 阻止了 100% 的拉伸。要么在 flex 容器的子级上使用 align-self: stretch，要么不使用 flex 而在父级上简单地使用 display: block; width: 100%。这是您示例的修改后的分支：stackblitz.com/edit/nextjs-dupppk?file=pages%2Findex.js
我已经成功地将示例从基于类的组件重构为功能组件。如果您检查一下，我可以将其作为替代答案发布：stackblitz.com/edit/nextjs-nsai5j?file=Components%2FPlayerFn.js

【解决方案2】：

这是针对同一问题的功能组件/钩子方法。stackblitz 来说明答案。

import React, { useRef, useEffect } from 'react';
import Head from 'next/head';
import styles from '../styles/Home.module.css';

export default function PlayerFn(props) {
  let fragmentRef = useRef();

  useEffect(() => {
    let domNodes = fragmentRef.current;
    window.MusePlayer(
      {
        container: domNodes,
        video: props.video,
        logo: props.logo,
        title: props.title,
        width: props.width,
        search: props.search,
        autoplay: props.autoplay,
        volume: props.volume,
        loop: props.loop,
        style: props.style
      },
      [props.video]
    );
  });

  return (
    <>
      <Head>
        <script src="https://muse.ai/static/js/embed-player.min.js" />
      </Head>
      <div ref={fragmentRef} class="muse-ai-player" />
    </>
  );
}

以及如何嵌入组件：

<PlayerFn
          video="pj4AW2W"
          logo={false}
          title={false}
          search={false}
          autoplay={false}
          loop={true}
          volume={100}
          width="100%"
        />

【讨论】：