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

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

实现步骤

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

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

js 复制代码
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 生命周期钩子中,我们调用后端接口获取视频的密钥,并在获取到密钥后,加载保利威播放器脚本并初始化播放器。

js 复制代码
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(视频密钥)以及其他播放器设置。我们还添加了事件监听器来获取视频播放进度,并在合适的时机向后端提交播放进度数据。

js 复制代码
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),我们还需要确保播放器被正确销毁,以避免内存泄漏。

js 复制代码
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 向父组件发送,或提交给后端以保存用户的学习进度。

js 复制代码
player.on("timeupdate", async () => {
  const currentTime = player.j2s_getCurrentTime();
  emit("getCurrentTime", currentTime);

});

使用该组件:

js 复制代码
      <Video
        :vid="vid"  //视频id
        :view_time="view_time" //回显观看进度
        @getCurrentTime="getCurrentTime" //获取观看进度
      ></Video>
相关推荐
IronmanJay1 小时前
【LeetCode每日一题】——862.和至少为 K 的最短子数组
数据结构·算法·leetcode·前缀和·双端队列·1024程序员节·和至少为 k 的最短子数组
码农幻想梦1 小时前
实验九 视图的使用
前端·数据库·oracle
加载中loading...2 小时前
Linux线程安全(二)条件变量实现线程同步
linux·运维·服务器·c语言·1024程序员节
Wx120不知道取啥名2 小时前
C语言之长整型有符号数与短整型有符号数转换
c语言·开发语言·单片机·mcu·算法·1024程序员节
开心工作室_kaic3 小时前
ssm010基于ssm的新能源汽车在线租赁管理系统(论文+源码)_kaic
java·前端·spring boot·后端·汽车
Python私教3 小时前
Flutter颜色和主题
开发语言·javascript·flutter
biomooc3 小时前
R语言 | paletteer包:拥有2100多个调色板!
r语言·数据可视化·1024程序员节
Hello.Reader3 小时前
FFmpeg 深度教程音视频处理的终极工具
ffmpeg·1024程序员节
runing_an_min3 小时前
ffmpeg视频滤镜:添加边框-drawbox
ffmpeg·音视频·边框·drawbox
大力水手~4 小时前
css之loading旋转加载
前端·javascript·css