uniapp播放hls加密视频报错 Uncaught (in promise) DOMException: The element has no supported sources. ，还有uniapp播放hls视频方法代码例子？

如果你遇到 "Uncaught (in promise) DOMException: The element has no supported sources." 的错误，这可能是由于播放的 HLS 视频是加密的，而浏览器或播放器不支持对该加密视频进行解密。在播放加密的 HLS 视频时，你需要使用相应的解密库来处理。

这里是一个在 UniApp 中播放加密 HLS 视频的代码示例：

<template>
  <view>
    <video :src="videoUrl" :poster="poster" @play="onPlay" @pause="onPause"></video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: '', // HLS视频地址
      poster: '', // 视频封面图地址
    };
  },
  methods: {
    onPlay() {
      console.log('视频开始播放');
    },
    onPause() {
      console.log('视频暂停');
    },
    loadVideo() {
      const videoElement = this.$refs.video;
      const player = new Hls(); // 使用 Hls 解密库

      player.loadSource(this.videoUrl);
      player.attachMedia(videoElement);

      player.on(Hls.Events.MANIFEST_PARSED, () => {
        videoElement.play();
      });
    },
  },
  mounted() {
    this.loadVideo();
  },
};
</script>

<style>
video {
  width: 100%;
  height: 100%;
}
</style>

在上面的示例中，我们使用 Hls.js（一个支持解密的 HLS 播放器库）来播放加密的 HLS 视频。你需要在项目中引入 Hls.js 库，并将视频的 HLS 地址赋值给 `videoUrl`，将视频的封面图地址赋值给 `poster`。

在 `loadVideo` 方法中，我们创建了一个 Hls 实例，并使用 `loadSource` 方法加载 HLS 视频源。然后，我们将 Hls 实例与 `<video>` 组件关联起来，通过 `attachMedia` 方法关联到 `<video>` 元素上。

在 `Hls.Events.MANIFEST_PARSED` 事件中，我们开始播放视频。

请确保你已正确引入 Hls.js 库，并按照需要替换视频的地址和封面图地址。