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>