2019-12-26 13:59:44 版本 : 视频展示(rview-c)
作者: 郁冲冲 于 2019年12月26日 发布在分类 / 人防组 / 人防前端 下,并于 2019年12月26日 编辑
 历史版本

修改日期 修改人 备注
2019-12-26 15:07:03[当前版本] 郁冲冲 1.1.0
2019-12-26 13:59:44 郁冲冲 1.1.0

应用场景:
在项目中会通过视频的形式展示有用信息,丰富呈现方式

 图例:


使用方法:
cnpm install rview-c --save

使用组件:
<template>
  <div>
    <videoShow
      :videoSrc="videoSrc"
      :poster="poster"
      :autoplay="autoplay"
      :width="width"
      :height="height"
      :objectFill="objectFill"
      :buttonShow="buttonShow"
      @getBigectURL="getBigectURL"
    ></videoShow>
  </div>
</template>
<script >
export default {
    data() {
        return {
            videoSrc: "",
            poster: "http://img0.imgtn.bdimg.com/it/u=1636028352,29453244&fm=11&gp=0.jpg",
            autoplay: true,
            width: "500",
            height: "400",
            objectFill:"fill",
            buttonShow:true,
        };
    },
    methods: {
        getBigectURL(event){
            console.log("getBigectURL", event);
            let current = event.target.files[0];
            let fileReader = new FileReader();
            fileReader.readAsDataURL(current);
            let that = this;
            fileReader.onload = function(e) {
                that.videoSrc = e.currentTarget.result;
            };
        }
    }
};
</script>


Methds:

参数 
类型   
是否必填
描述  
videoSrc  
String
是 
视频的URL
poster  
String

视频封面
autoplay  
Boolean  
是 
视频自动播放
width  
String

视频宽
height  
String  

视频高
objectFill  
String 

视频内容填充 
getBigectURL  
Function 

调用本地文件地址

历史版本-目录  [回到顶端]
    知识分享平台 -V 4.8.7 -wcp