Vue-video-streaming NPM

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(评论的内容)