vue/html上传视频，并实现视频轮播图展示效果

墨蓝 2022-09-07 06:12 304阅读 0赞

## 上传视频轮播图展示 ##

### 一. 参考文章 ###

> https://blog.csdn.net/weixin\_43881166/article/details/115303935（视频播放器）  
> https://blog.csdn.net/CSND7997/article/details/104985981  
> （为轮播图插入新的视频元素）  
> https://blog.csdn.net/zongmaomx/article/details/108749682（视频轮播）

### 实现 ###

#### Step1.实现只能轮播当前上传视频多次 ####

#前端代码
     <div class="block">
        <el-carousel  direction="vertical"  height="230px">
          <el-carousel-item v-for="item in 2" :key="item">
    
     <video-player  class="video-player vjs-custom-skin"
                    id = "myVideo"
                    ref="videoPlayer"
                    :playsinline="true"
                    :options="playerOptions"
    
     ></video-player>
    
    
    
            <h3 class="small">{ {  item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </div>
      <el-button
                                v-show="showbutton"
                                icon="el-icon-upload2"
                                class="download_bt"           
                                v-on:click="true_upload"
                                style="margin:20% 0 0 20%;font-size:1rem;color:gray;font-weight:700;background-color: #ffffff;display: none;text-align:center"
                      >
                            上传文件
                            <input
                                    ref="upload"
                                    name="file"
                                    type="file"
                                    @change="upload"
                                    style="margin-left: 30px;color: gray;background-color: #ffffff;display: none;"
                            />
      # 上传视频到指定文件夹后，给一个vue-video-player组件赋值视频源地址以及封面
         upload(e){ 
                // this.dialogTableVisible = true;
                //
                // this.percentage = 0;
                // var timer = setInterval(() => { 
                // this.myFunc();
                // }, 1000);
    
                let file = e.target.files[0];
                let filename = e.target.files[0].name;
    
                let param = new FormData(); //创建form对象
                // console.log(this.ev)
                param.append('file',file);//通过append向form对象添加数据
                console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
                param.append('fname',filename);//通过append向form对象添加数据
                console.log(param.get('fname'))
    
                axios.post('http://127.0.0.1:5000/upload',param,{ headers:{ 'Content-Type':'application/x-www-form-urlencoded' }}, ) //请求头要为表单
                    .then(response=>{ 
                      // this.percentage = 100;
                      // clearInterval(timer);
                      //
                      // console.log(response.data);
    
                      this.filename = response.data;
                      console.log(this.filename);
                      this.playerOptions['poster']= response.data;
                      //
                      // this.dialogTableVisible = false;
                    })
                    .catch(function (error) { 
                      console.log(error);
                    })
              },

#### Step2.实现添加不同元素 ####

> 上述代码主要工作如下：  
> 1.点击上传文件按钮触发函数upload（e）同vue特定接口将当前选中的文件名称以及地址返回后端flask框架当中，进行文件归纳移动，并同时在后端截取视频的第一帧图片并编为BASE64码返回前端。  
> 2.前端获得图片的base64码形式加上data：赋给一个playerOptions字典里的poster和src参数，vue-video-player组件内的参数:options="playerOptions"被赋值一个字典数据后即可播放视频。  
> 3.前端轮播实现轮播两个内容，此时两个内容均是刚才上传后的视频，产生重复轮播。

> 实现对所有上传视频进行无重复的轮播展示，一旦涉及存储，最简单想到使用列表分别存储视频源地址以及封面，随着上传不断增加，列表不断变长，并在上传文件的同时将新增元素赋值给新的字典作为视频插件的参数，参数字典也构成一个列表，从而对于不同的视频只需对相同的插件形式赋予不同的参数即可。在插入新视频元素的文章当中我找到了答案。  
> 1.首先在上传文件的upload函数中，完成基本的上传任务。  
> 2.设置变量add用于记录当前添加的元素在列表中的位置，我们获得视频源地址存到videolist，获得封面图片的base64码存入posterlist当中。  
> 3.调用函数插入新的视频元素，调用函数，将当前位置即add位置处的videolist和posterlist中元素赋值给字典中的相应参数，并将该字典存入参数列表，用于轮播图组件进行遍历，从而实现上传文件后的参数列表更新增加，轮播图遍历展示的视频不断增加。

#前端代码
    </div>
    
          </div>
     <el-form-item label="上传记录："   style="margin:5% 0 0 1%">
          </el-form-item>
     <div class="block">
        <el-carousel  direction="vertical"  height="230px">
          <el-carousel-item id="lunbo" v-for="(item,index) in videolist" :key="item">
    
     <video-player  class="video-player vjs-custom-skin"
                    id = "myVideo"
                    ref="videoPlayer"
                    :playsinline="true"
                    :options="playerOptions[index]"
    
     ></video-player>
    
          </el-carousel-item>
        </el-carousel>
      </div>
      
    #method中代码
    upload(e){ 
                // this.dialogTableVisible = true;
                //
                // this.percentage = 0;
                // var timer = setInterval(() => { 
                // this.myFunc();
                // }, 1000);
    
                let file = e.target.files[0];
                let filename = e.target.files[0].name;
    
                let param = new FormData(); //创建form对象
                // console.log(this.ev)
                param.append('file',file);//通过append向form对象添加数据
                console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
                param.append('fname',filename);//通过append向form对象添加数据
                console.log(param.get('fname'))
    
                axios.post('http://127.0.0.1:5000/upload',param,{ headers:{ 'Content-Type':'application/x-www-form-urlencoded' }}, ) //请求头要为表单
                    .then(response=>{ 
                      // this.percentage = 100;
                      // clearInterval(timer);
                      //
                      // console.log(response.data);
    
                      this.filename = response.data;
                      console.log(this.filename);
                      
                       var date = new Date();
                        var month = date.getMonth() + 1;
                        var strDate = date.getDate();
                        if(month >= 1 && month <= 9) { 
                            month = "0" + month;
                        }
                        if(strDate >= 0 && strDate <= 9) { 
                            strDate = "0" + strDate;
                        }
                        var currentdate = date.getFullYear() + "-" + month + "-" + strDate;
                      console.log(currentdate)
    
                      this.posterlist.push(response.data);
                      var path = "http://localhost:5000/date/raw/video/"+currentdate+"/"+filename
                      this.videolist.push(path);
                      this.getMovieList(this.add);
                      this.playerOptions0['poster']= response.data;
                      this.add = this.add + 1;
                      alert("双桨系统提醒您：上传成功！");
                      
                      
                      
                      
                      //
                      // this.dialogTableVisible = false;
                    })
                    .catch(function (error) { 
                      console.log(error);
                    })
              },
    methods: { 
    getMovieList(index) { 
        // 这里正常来说应该是从后台获取的数据，以下操作都是在成功的回调函数里
              let arrs = { 
                playbackRates: [1.0, 2.0, 3.0], //播放速度
                autoplay: false, //如果true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 导致视频一结束就重新开始。
                preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: "zh-CN",
                aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [
                  { 
                    type: "video/mp4",
                    src: this.videolist[index]//url地址
                  }
                ],
                poster:this.posterlist[index], //封面地址
                notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: { 
                  timeDivider: true,
                  durationDisplay: true,
                  remainingTimeDisplay: false,
                  fullscreenToggle: true //全屏按钮
                }
              };
              this.playerOptions.push(arrs);
        },

整个过程基本完成若想了解更多请关注公众号“厚点编程”  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvY2tob3U_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvY2tob3U_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/26c1412f1d5641c7bed372bcf0dde0e2.png