vue video播放hls

在Vue中使用video标签播放HLS（HTTP Live Streaming）视频，你可以使用一些第三方的库来实现，比如video.js和hls.js。

首先，确保你已经安装了Vue和npm（Node Package Manager）。然后，按照以下步骤进行操作：

1. 安装video.js和hls.js：在终端中运行以下命令安装这两个库：

   npm install video.js hls.js

2. 在你的Vue组件中引入video.js和hls.js：

   import 'video.js/dist/video-js.css';
   import videojs from 'video.js';
   import 'videojs-contrib-hls';

3. 使用video.js创建一个video标签：

   <template>
     <div>
       <video id="my-video" class="video-js vjs-default-skin"></video>
     </div>
   </template>

4. 在Vue组件的mounted钩子函数中初始化video.js，并设置HLS源：

   export default {
     mounted() {
       // 初始化video.js
       const player = videojs('my-video');
       // 加载HLS源
       player.src({
         src: 'path/to/your/hls/video.m3u8',
         type: 'application/x-mpegURL'
       });
       // 播放视频
       player.play();
     }
   }

注意替换上述代码中的`path/to/your/hls/video.m3u8`为你实际的HLS视频文件路径。

这样，你就可以在Vue中使用video标签播放HLS视频了。确保你的服务器支持HLS视频格式，同时也可以使用其他第三方库或插件来实现HLS播放功能。