Vue 3 对接保利威云点播播放器实践

首先，需要在项目中引入保利威的云点播播放器脚本。这个播放器的脚本可以从保利威的官网获取。我们将使用 Vue 3 的 onMounted、onBeforeUnmount 这些生命周期函数来加载和卸载播放器。

实现步骤

1. 加载保利威播放器脚本

由于保利威的播放器脚本是异步加载的，我们需要动态创建一个 <script> 标签并在页面加载时插入到 document.body 中。脚本加载完毕后，我们通过回调函数初始化播放器。

const vodPlayerJs = "https://player.polyv.net/resp/vod-player/latest/player.js";
let player = null;

const loadPlayerScript = (callback) => {
  if (!window.polyvPlayer) {
    const myScript = document.createElement("script");
    myScript.setAttribute("src", vodPlayerJs);
    myScript.onload = callback;
    document.body.appendChild(myScript);
  } else {
    callback();
  }
};

2. 获取视频密钥并初始化播放器

保利威的视频播放需要一个 token（视频密钥），这通常是通过后端 API 获取的。在 onMounted 生命周期钩子中，我们调用后端接口获取视频的密钥，并在获取到密钥后，加载保利威播放器脚本并初始化播放器。

const getdataCurrent = () => {
  123()
    .123({
      videoId: ‘123’,
      user_id: ‘123’,
    })
    .then((data) => {
      if (data.data.token) {
        playsafe.value = data.data.token;
        loadPlayerScript(loadPlayer);
      }
    });
};

3. 初始化播放器

一旦播放器脚本加载完毕，我们使用 window.polyvPlayer 来初始化播放器。播放器的配置项包含 vid（视频 ID）、playsafe（视频密钥）以及其他播放器设置。我们还添加了事件监听器来获取视频播放进度，并在合适的时机向后端提交播放进度数据。

const loadPlayer = () => {
  const polyvPlayer = window.polyvPlayer;
player = polyvPlayer({
  wrap: "#player", // 播放器容器的选择器，指定播放器渲染的 DOM 元素
  width: "100%",   // 播放器的宽度，可以是像素值或百分比
  height: 450,     // 播放器的高度，可以是像素值或百分比
  speed: false,    // 是否启用播放速度控制，默认为 false 表示不启用
  ban_skin_progress: true, // 是否禁用皮肤进度条，默认为 false 表示不禁用，true 表示禁用
  ban_seek: "on",  // 是否禁用拖动进度条，默认为 "off" 表示不禁用，"on" 表示禁用
  ban_seek_by_limit_time: "on", // 是否限制拖动进度条的时间范围，默认为 "off" 表示不限制，"on" 表示限制
  vid: vid.value,  // 视频 ID，用于指定要播放的视频
  playsafe: playsafe.value, // 播放安全令牌，用于验证播放权限
});

  // 监听播放器初始化完成
  player.on("s2j_onPlayerInitOver", () => {
    console.log("播放器初始化完成");

    // 获取视频总时长
    const duration = player.j2s_getDuration();
    console.log("视频总时长：", duration);

    // 跳转到初始播放位置
    player.j2s_seekVideo(view_time.value);

    // 获取当前播放时间
    const currentTime = player.j2s_getCurrentTime();
    console.log("当前播放时间：", currentTime);
  });

  // 监听播放进度更新
  player.on("timeupdate", () => {
    const currentTime = player.j2s_getCurrentTime();
    emit("getCurrentTime", currentTime);
  });
};

4. 视频切换与销毁

在某些场景下，我们可能需要动态切换播放的视频。这可以通过 player.changeVid 来实现，我们在代码中提供了一个 setdataCurrent 方法来切换视频 ID。

当组件销毁时（onBeforeUnmount），我们还需要确保播放器被正确销毁，以避免内存泄漏。

const setdataCurrent = () => {
  console.log(vid.value, ";;;;");
  const option = {
    vid: "88083abbf5bcf1356e05d39666be527a_8",
  };
  player.changeVid(option); // 切换下一个视频
};

onBeforeUnmount(() => {
  if (player) {
    player.destroy();
  }
});

5. 处理视频播放进度

播放器提供了 timeupdate 事件来监听播放进度的更新。我们可以通过 player.j2s_getCurrentTime() 获取当前播放的时间点，并将其通过 emit 向父组件发送，或提交给后端以保存用户的学习进度。

player.on("timeupdate", async () => {
  const currentTime = player.j2s_getCurrentTime();
  emit("getCurrentTime", currentTime);

});

使用该组件：

      <Video
        :vid="vid"  //视频id
        :view_time="view_time" //回显观看进度
        @getCurrentTime="getCurrentTime" //获取观看进度
      ></Video>