Vue集成播放器

最新推荐文章于 2024-05-29 10:11:25 发布

栀梦星

最新推荐文章于 2024-05-29 10:11:25 发布

阅读量374

点赞数

分类专栏： C#自学文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_47053856/article/details/128738696

版权

C#自学专栏收录该内容

37 篇文章 3 订阅

订阅专栏

文章介绍了如何通过npm安装xgplayer和aplayer插件来搭建视频和音乐播放器。首先，使用npm安装xgplayer，并展示了如何在Vue项目中配置和使用该视频播放器。接着，文章演示了aplayer的安装过程，包括需要额外引入hls.js，并提供了创建音乐播放器的详细步骤，包括歌曲列表和播放器配置。

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

安装

$ npm install xgplayer

页面配置

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import Player from 'xgplayer'
//音乐播放器
onMounted(() => {
      const player = new Player({
        id: 'mse',
        autoplay: false,
        width: 700,
        height:400,
        url: 'http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4',
        poster: "https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
        playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
      })
  });

</script>

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

<style lang="scss" scoped>

</style>

在这里插入图片描述
第一步，npm下载aplayer插件：cnpm install aplayer --save

第二步，搭配下载hls.js：cnpm i hls.js --save

第三步，在需要使用的页面引入插件，也要引入插件的样式**

代码如下
直接复制粘贴即可看到效果：

<template>
  <div id="app">
    <h2>aplayer播放器</h2>
    <br />
    <!-- 准备一个容器用来存放音乐播放器 -->
    <div id="aplayer"></div>
  </div>
</template>

<script>
import APlayer from "APlayer"; // 引入音乐插件
import "APlayer/dist/APlayer.min.css"; // 引入音乐插件的样式
export default {
  name: "App",
  data() {
    return {
      audio: [ // 歌曲列表
        {
          name: "Windy Hill", // 歌曲名字
          artist: "钢琴-羽肿", // 歌曲演唱者
          url: // 歌曲地址（这里用外链地址）
            "https://sharefs.ali.kugou.com/202110281324/e793a5ebf43ef95bb75f64d07ef246e4/G167/M02/15/07/h5QEAF1KXo2ALzKrAEtAl_Oe_Fo659.mp3",
          cover: "http://imge.kugou.com/stdmusic/150/20170815/20170815070007812976.jpg", // 歌曲头像
          lrc: "", // 歌词
          theme: "rgb(127, 218, 180)", // 播放这首歌曲时的主题色
        },
        {
          name: "女儿情",
          artist: "古筝-付娜",
          url:
            "https://sharefs.ali.kugou.com/202110281338/150a7c708ed5e20a47e8a9b80cf1200a/G235/M00/0F/05/i4cBAF77vP2AFdNjAChBofqgQnw363.mp3",
          cover: "http://imge.kugou.com/stdmusic/150/20200606/20200606220631519630.jpg",
          lrc: "",
          theme: "rgb(61, 162, 230)",
        },
        {
          name: "故郷の原風景",
          artist: "陶笛-犹豫的泥巴",
          url:
            "https://sharefs.ali.kugou.com/202110281310/bdb53444846cecd8d45a64e2aab3b6ca/G228/M0A/1B/13/xJQEAF9kx46AZ3IaAEjEvnEtWQw706.mp3",
          cover: "http://imge.kugou.com/stdmusic/150/20200812/20200812134914113741.jpg",
          lrc: "",
          theme: "#baf",
        },
      ],
      info: {
        fixed: false, // 不开启吸底模式
        listFolded: true, // 折叠歌曲列表
        autoplay: true, // 开启自动播放
        preload: "auto", // 自动预加载歌曲
        loop: "all", // 播放循环模式、all全部循环 one单曲循环 none只播放一次
        order: "list", //  播放模式，list列表播放, random随机播放
      },
    };
  },
  mounted() {
    // 初始化播放器
    this.initAudio();
  },
  methods: {
    initAudio() {
      // 创建一个音乐播放器实例，并挂载到DOM上，同时进行相关配置
      const ap = new APlayer({
        container: document.getElementById("aplayer"),
        audio: this.audio, // 音乐信息
        ...this.info, // 其他配置信息
      });
    },
  },
};
</script>

<style lang="less" scoped>
#app {
  width: 100%;
  height: 100%;
  padding: 50px;
  #aplayer {
    width: 480px; // 定个宽度
  }
}
</style>