推流结束后，vue进行hls播放

最新推荐文章于 2024-08-15 17:40:17 发布

taojin12

最新推荐文章于 2024-08-15 17:40:17 发布

阅读量1.5k

点赞数

分类专栏：流媒体文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/taojin12/article/details/125077618

版权

在推流结束后，本文介绍了如何使用vue-video-player组件在前端实现HLS视频的播放。详细步骤包括安装组件、在main.js中导入以及编写vue播放组件代码。在开发过程中要注意避免组件名冲突导致的错误。此外，提供了github资源链接，包含RTMP和MP4的实现案例。

摘要由CSDN通过智能技术生成

在通过EasyDarwin 推流结束后，需要实现回放功能，在本地存储过程中是通过hls进行存储的，那么前端要实现hls的播放，这里使用的是vue-video-player组件。

vue-video-player 是对video.js 的进一步封装，只需要安装vue-video-player，不需要进一步安装video.js。

1、安装组件

npm install vue-video-player --save

2、在main.js 文件中导入

import Vue from 'vue'
import VueVideoPlayer from 'vue-video-player'

// require videojs style
import 'video.js/dist/video-js.css'
// import 'vue-video-player/src/custom-theme.css'

Vue.use(VueVideoPlayer, /* {
  options: global default options,
  events: global videojs events
} */)

3、vue播放组件视频代码

<template>
    <div style="position: relative">
      <div>视频播放</div>
      <video-player style="margin-top: 50px;" class="vjs-custom-skin" 
        :options="playerOptions" 
        @ready="playerReadied"&g