vue3点击按钮播放视频HLS

### Vue3 中实现点击按钮播放 HLS 视频

为了实现在 Vue3 项目中通过点击按钮来触发 HLS 协议视频的播放功能，可以采用 `xgplayer` 播放器插件。此插件支持多种视频格式，包括 HLS 流媒体协议，并提供了良好的跨平台兼容性[^2]。

下面是一个完整的解决方案：

#### 安装依赖库
首先，在命令行工具中执行如下 npm 命令以安装所需的包：

npm install xgplayer xgplayer-hls.js --save

#### 创建组件模板结构
接着创建一个新的 Vue 组件文件用于承载播放逻辑以及 UI 控制元素。这里展示了一个简单的 HTML 结构作为例子：

<template>
  <div class="video-container">
    <!-- 按钮 -->
    <button @click="playVideo">播放</button>

    <!-- 视频容器 -->
    <div id="player"></div>
  </div>
</template>

#### 编写 JavaScript 部分
随后编写相应的脚本部分初始化播放器实例并处理事件响应：

<script setup>
import { ref, onMounted } from 'vue';
import Player from 'xgplayer';
import HlsjsPlayer from 'xgplayer-hls.js';

const playerInstance = ref(null);

onMounted(() => {
  const options = {
    id: "player",
    url: "http://demo.srs.com/live/livestream.m3u8", // 设置要播放的 m3u8 文件路径
    fluid: true,
    playbackRate: [0.5, 0.75, 1, 1.5, 2],
    volume: 0.8,
    muted: false,
    autoplay: false,
    playsinline: true,
    isLive: true,
    hlsOptions: {}
  };

  playerInstance.value = new HlsjsPlayer(options);
});

// 方法：当用户点击“播放”按钮时调用该函数启动播放过程
function playVideo() {
  if (playerInstance.value && !playerInstance.value.playing()) {
    playerInstance.value.play();
  }
}
</script>

上述代码片段展示了如何在一个 Vue3 应用程序内设置一个基于 `xgplayer` 和其扩展模块 `xgplayer-hls.js` 来播放 HLS 格式的网络流媒体资源的方法。