阿里云视频点播切换上一个下一个视频(vue)_player = new aliplayer 切换播放路径-CSDN博客

本文链接：https://blog.csdn.net/QY_ing/article/details/135198599

本文介绍了如何在使用阿里云视频点播服务时，通过HTML和JavaScript自定义控制条，实现在视频播放过程中切换上一个和下一个视频的功能。作者分享了具体的代码片段和CSS样式，以帮助开发者解决类似需求。

摘要由CSDN通过智能技术生成

前些天有个使用阿里云的视频点播添加切换上一个下一个视频需求，当时查看官网文档是有播放下一个的插件，但是要把管网提供的代码打包后生成了一个js文件

但是好像下不了依赖不能打包，没有什么好办法就换了一种使用html通过嵌入元素的方式实现，可参考哦！

html部分和官网一样

<template>
  <div id="J_prismPlayer"></div>
</template>

js部分

var player = new Aliplayer({
           id: 'J_prismPlayer',
           width: '100%',
           vid : '<your video ID>', // 必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
           playauth : '<your PlayAuth>', // 必选参数。音视频播放凭证。
           // authTimeout: 7200, // 播放地址的有效时长，单位：秒。该时长会覆盖在视频点播控制台设置的URL鉴权的有效时长。如果不传，则取默认值7200。如需设置此参数，请确保该时间大于视频的实际时长，防止播放地址在播放完成前过期。
         },function(player){
              let controlbarDiv = document.querySelector(".prism-controlbar");
              // 创建子div元素
              var nextDiv = document.createElement("div"); // 切换下一个按钮
              nextDiv.setAttribute("id", "play-next-btn");

              var lastDiv = document.createElement("div"); // 切换上一个按钮
              lastDiv.setAttribute("id", "play-last-btn");

              // 控制条播放按钮
              var playBtn = document.querySelector(".prism-play-btn");
              // 将上一个元素添加到指定的子div前面
              controlbarDiv.insertBefore(nextDiv, playBtn.nextSibling);
              nextDiv.addEventListener("click", nextPlay);

              // 将下一个元素添加到指定的子div后面
              controlbarDiv.insertBefore(lastDiv, playBtn);
              lastDiv.addEventListener("click", lastPlay);
        });

const nextPlay = () => {
  //切换下一个视频逻辑...
  console.log("切换下一个视频");
};

const lastPlay = () => {
  //切换上一个视频逻辑...
  console.log("切换上一个视频");
};

写完后就我们就会看到就会有这两个元素，然后给元素添加样式图片

  #play-next-btn {
    // background-color: white;
    background-image: url("/public/playchange/skip_next-copy.png");
    width: 24px;
    height: 24px;
    float: left;
    margin-top: 12px;
    cursor: pointer;
  }
  #play-last-btn {
    // background-color: white;
    background-image: url("/public/playchange/skip_next-copy.png");
    width: 24px;
    height: 24px;
    float: left;
    margin-left: 10px;
    margin-top: 12px;
    cursor: pointer;
    transform: rotate(180deg);
  }

最后来看我们的效果