vue-video-streaming

Install & Use

npm install vue-video-streaming
#or
yarn add vue-video-streaming

Import and register component

Global

import Vue from 'vue'
import VueVideoStreaming from 'vue-video-streaming'
Vue.use(VueVideoStreaming)

Local

<template>
    <vue-video-streaming
        :videodatas="videoDatas"
        :commentlist="commentList"
        :commenttotal="commentTotal"
        :userinfo="info"
        :sliderimg="sliderImg"
        @uploaddata="getvideoList"
        @getcomment="getcommentList"
        @updatecomment="updateComment"
    ></vue-video-streaming>
</template>
<script>
import { VueVideoStreaming } from 'vue-video-streaming'
export default {
    components: {
        VueVideoStreaming,
    },
}
</script>

Props

| 属性 | 说明 | 类型 | 是否必填 | | :----------------------- | :----------------- | :----- | :--------------------------- | | videodatas | 视频数据 | Array | 是 | | videodatas[].id | 视频 id | String | 是 | | videodatas[].postAvatar | 发布视频者的头像 | String | 否 | | videodatas[].nickname | 发布视频者的名字 | String | 否 | | videodatas[].title | 视频的标题 | String | 是 | | videodatas[].description | 视频的描述 | String | 否 | | videodatas[].videoWidth | 视频的宽度 | Number | 是 | | videodatas[].videoHeight | 视频的高度 | Number | 是 | | videodatas[].sourceUrl | 视频的来源 | String | 是 | | videodatas[].poster | 视频的封面 | String | 否 | | videodatas[].upNum | 视频的点赞人数 | Number | 是 | | videodatas[].commentNum | 视频的评论数 | Number | 是 | | videodatas[].isUp | 视频是否点赞 | Number | 是（0 为未点赞，1 为已点赞） | | commentList | 当前视频的评论 | Array | 否（可为[]） | | commentList[].id | 评论 id | String | 是 | | commentList[].content | 评论内容 | String | 是 | | commentList[].nickname | 评论人的名字 | String | 否 | | commentList[].avatar | 评论人的头像 | String | 否 | | commentList[].createDate | 评论时间 | String | 是 | | commenttotal | 当前视频评论总数 | Number | 是 | | userinfo | 当前观看用户的信息 | Object | 否 | | userinfo.avatar | 当前观看用户的头像 | String | 否 | | userinfo.nickname | 当前观看用户的名字 | String | 否 | | sliderimg | 视频进度条滑块图片 | String | 否 |

Events

| 事件名 | 说明 | 返回值 | | :------------ | :----------------------------------------------------- | :------------------------------------------------------ | | uploaddata | 现有视频播放结束，需根据上一个视频的 id 加载后续的视频 | id（最后一条视频的 id） | | getcomment | 加载评论 | videoId（需加载评论的视频 id）,page(评论分页加载的页数) | | updatecomment | 评论发送 | videoId（评论的视频 id）,comment(评论的内容) |