vue video播放hls
时间: 2023-07-23 10:58:45 浏览: 63
在Vue.js中播放HLS视频,你可以使用 `video.js` 和 `videojs-contrib-hls` 插件来实现。下面是一些步骤供你参考:
1. 首先,安装 `video.js` 和 `videojs-contrib-hls` 插件:
```bash
npm install video.js videojs-contrib-hls
```
2. 在你的 Vue 组件中,导入 `video.js` 的样式和脚本:
```javascript
import 'video.js/dist/video-js.css';
import videojs from 'video.js';
```
3. 创建一个 `video` 标签,并为其分配一个唯一的 `id`:
```html
<template>
<div>
<video id="my-video" class="video-js"></video>
</div>
</template>
```
4. 在 Vue 组件的 `mounted` 钩子中,初始化 `video.js` 并添加 `videojs-contrib-hls` 插件:
```javascript
mounted() {
// 初始化 video.js
const videoElement = document.getElementById('my-video');
const player = videojs(videoElement);
// 添加 videojs-contrib-hls 插件
player.ready(function() {
const hlsSource = {
src: 'your-hls-video-url.m3u8',
type: 'application/x-mpegURL'
};
player.src(hlsSource);
});
}
```
确保将 `'your-hls-video-url.m3u8'` 替换为你的 HLS 视频的实际 URL。
5. 最后,确保在组件销毁时销毁 `video.js` 播放器:
```javascript
beforeDestroy() {
if (this.player) {
this.player.dispose();
}
}
```
这样,你就可以在 Vue.js 中播放 HLS 视频了。请注意,你还可以根据需要配置和自定义 `video.js` 播放器。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)