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

在通过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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值