# 组件名：hsLive（直播视频组件） ### 作者：屈磊 ### 效果：  ## 使用方式： ``` 需要插件支持 // cnpm i --save video.js@7.11.8 import Videojs from'video.js/dist/video.min.js' import'video.js/dist/video-js.min.css' <!-- 在对应页面使用 --> import hsLive from'./video/hs-live.vue'     <hsLive :see-data="seeData" :video-data="liveData" :comment-data="commentData" :recommendData="recommendData" @clickRecommend="clickRecommend"   />          ## 参数 data() { return { // 直播数据 liveData:{ id:0, videoSrc:'https://wenhuabu-media.bj.bcebos.com/广场舞教学视频国家云logo/斑鸠调 教学版.mp4', poster:'https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/qlimg/aisibg.jpg', title:'人像质感磨皮技巧', isBrief:false, // 是否显示视频下的标题 时间， state:0, brief:"简介：中东铁路的修筑，带来了丰富的俄罗斯文化，黑龙江无论是衣食住行还是文化与建筑，都留有雪山的印记。…"             }, 推荐视频列表 recommendData:[ { poster:"http://via.placeholder.com/187x103", title:"大龙老师带您领略哈尔滨化馆引领", view:"233", state:0, videoSrc:'https://wenhuabu-media.bj.bcebos.com/广场舞教学视频国家云logo/斑鸠调 教学版.mp4', isBrief:false ,// 是否显示视频下的标题 时间， brief:"简介：1"    }] // 评论数据 commentData: [ { id: 0, name: '张先生', time: '2021-02-08 13:25:36', evaluation: '节目很精彩，小朋友很喜欢，希望以后多多主办类似的活动' }, ] } },                                               ``` ### 说明： 点赞/收藏/分享可选择显示 ### 参数： | 参数 | 作用 | 类型 | 默认 | 是否必传 | 属性 | | --- | --- | --- | --- | --- | --- | |   recommendData |  推荐数据 |  Array |  |  是 |   | | commentData | 评论数据 | Array | | 是 | | |   liveData |  当前直播 |  Object|  |  是 |   |