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

如果在电脑浏览器中播放 HLS 加密视频时出现 "Uncaught (in promise) DOMException: The element has no supported sources." 错误，这可能是由于浏览器不支持对加密的 HLS 视频进行解密。

UniApp 默认使用的是 `<video>` 组件来播放视频，但是在电脑浏览器上，部分浏览器（如 Chrome、Firefox）并不原生支持播放 HLS 视频。为了在电脑浏览器上播放 HLS 视频，你可以使用一些额外的解密库，如 `hls.js`。

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

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

<script>
import Hls from 'hls.js';

export default {
  data() {
    return {
      videoUrl: 'http://example.com/video.m3u8', // HLS视频地址
      poster: 'http://example.com/poster.jpg', // 视频封面图地址
    };
  },
  methods: {
    onPlay() {
      console.log('视频开始播放');
    },
    onPause() {
      console.log('视频暂停');
    },
    loadVideo() {
      const videoElement = this.$refs.video;
      
      if (Hls.isSupported()) {
        const hls = new Hls();
        
        hls.loadSource(this.videoUrl);
        hls.attachMedia(videoElement);
        
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
          videoElement.play();
        });
      } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
        videoElement.src = this.videoUrl;
        videoElement.addEventListener('loadedmetadata', () => {
          videoElement.play();
        });
      }
    },
  },
  mounted() {
    this.loadVideo();
  },
};
</script>

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

在上面的示例中，我们首先引入了 `hls.js` 库，你可以通过 npm 或其他方式安装该库。然后，我们使用 `loadVideo` 方法来加载并播放加密的 HLS 视频。

在 `loadVideo` 方法中，我们首先检查浏览器是否支持 `hls.js` 库。如果支持，我们创建一个 `Hls` 实例，并使用 `loadSource` 方法加载 HLS 视频源。然后，我们将 `Hls` 实例与 `<video>` 组件关联起来，通过 `attachMedia` 方法将其关联到 `<video>` 元素上。

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

如果浏览器不支持 `hls.js`，我们进行第二个判断，检查浏览器是否支持直接播放 HLS 视频。如果支持，我们直接将视频源赋值给 `<video>` 组件的 `src` 属性，并在 `loadedmetadata` 事件中开始播放视频。

请注意，为了在电脑浏览器上播放 HLS 加密视频，你需要确保已正确引入 `hls.js` 库，并根据需要替换视频的地址和封面图地址。