# 组件名：hsCourseChapter （课程视频组件） ### 作者：屈磊 ### 效果：   ## 使用方式： ``` 需要插件支持 // 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 hsCourseChapter from'./video/video-course-chapter.vue'     <hsCourseChapter  :see-data="seeData" :video-data="liveData" :comment-data="commentData" :chapter-data="chapterData" :chapter-id="chapterId" @clickChapter="clickChapter"       />   参数 data() { return { seeData:{ pubId: 1, browse: 111, collect: 111, give: 111, isGive: false,//是否点赞 isCollect: true,//是否收藏 isShowShare: true, // 是否显示分享 }, //当前视频数据 videoData:{ 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:"人像质感磨皮技巧", time: "2021-03-21 8:00-10:00",//未开始显示 source: "黑龙江省文化馆来源", publicTime: "2021-03-21",//发布时间 isBrief:true,//是否显示视频下的标题 时间， preview:"",// 0预告  1 直播 2 回看， chapterId:0,//章节ID }， // 章节数据 chapterData: [ { id: 1, chapter: '第一章 基础入门', children: [ { id: 0, preview: 1, 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: '人像质感磨皮技巧人像质感磨皮技巧人像质感磨皮技巧人像质感磨皮技巧', time: '2021-03-21 8:00-10:00', source: '黑龙江省文化馆来源', publicTime: '2021-03-21', chapterId: 0,//章节ID isBrief: true, // 是否显示视频下的标题 时间， }, { id: 1, preview: 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: '标题', time: '2021-03-21 8:00-10:00', source: '黑龙江省文化馆来源', publicTime: '2021-03-21', chapterId: 1, isBrief: true, // 是否显示视频下的标题 时间， } ] } ], // 评论数据 commentData: [ { id: 0, name: '张先生', time: '2021-02-08 13:25:36', evaluation: '节目很精彩，小朋友很喜欢，希望以后多多主办类似的活动' }, ] } },                                               ``` ### 说明： 点赞/收藏/分享可选择显示 ### 参数： | 参数 | 作用 | 类型 | 默认 | 是否必传 | 属性 | | --- | --- | --- | --- | --- | --- | | seeData | 数据包 | Object | | 是 | | | videoData | 视频数据 | Object | | 是 | | | commentData | 评论数据 | Array | | 是 | | | chapterData | 章节数据 | Array | | 是 | | | studyTime | 视频进度 | Number | | 否 | |