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 加密视频的代码示例： ```vue <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` 库，并根据需要替换视频的地址和封面图地址。