vue上传视频至保利威

保利威的准备

1. 进入保利威的后台管理 选择云点播功能

image.png

2. 进入api接口选项 并且会拿到你专属的 【userid】【writeToken】【secretkey】

image.png

image.png

vue的准备

1. 依赖

npm i @polyv/vod-upload-js-sdk  // 保利威直传插件
npm i js-md5  // 你必须的md5加密

2.下面请准备一个js/ts的文件 并copy进以下代码

import PlvVideoUpload from '@polyv/vod-upload-js-sdk'
import md5 from 'js-md5'

// 此方法主要用于加密一些保利威的专用参数 如果是后端传递的 可以打掉
function getToken(videoUpload) {
  const ptime = Date.now()
  const userid = ''
  const secretkey = ''
  const writeToken = ''
  const hash = md5(ptime + writeToken)
  const sign = md5(secretkey + ptime)
  videoUpload.updateUserData({ ptime, hash, sign, userid })
}

// 由于保利威的一些机制 你需要三分钟就重新加密你的 ptime 如果你打掉了就不行
function autoUpdateUserData(timer, videoUpload) {
  getToken(videoUpload)
  if (timer) {
    clearTimeout(timer)
    timer = null
  }
  timer = setTimeout(() => {
    autoUpdateUserData(timer, videoUpload)
  }, 3 * 50 * 1000)
}

/**
 * @Date: 2021/3/26
 * @param: files -> 一个文件的数组 注意 是【数组】
 * @param: fileSetting -> 主要是用来传递给保利威的属性
 * @param: callback -> 上传进度，成功，失败 的回调 tips：回调太多 我就拿了这三个比较有用的
 */
export function uploadFile(files, fileSetting, callback) {
  const videoUpload = new PlvVideoUpload()
  autoUpdateUserData(null, videoUpload)
  Array.from(files).forEach((file, index) => {
    const uploader = videoUpload.addFile(file, {
      // 上传视频进度的回调
      FileProgress: ({ progress }) => {
        const progressSize = (progress * 100).toFixed(2)
        callback(index, progressSize)
      },
      // 上传视频成功的回调
      FileSucceed: ({ fileData }) => {
        callback(index, fileData)
      },
      // 上传视频失败的回调
      onFileFailed: ({ errData }) => {
        callback(index, errData)
      }
    }, fileSetting)
  })

  /**
   * 这里的调用是上传全部
   * 本来我也是一个一个调的
   * 但是考虑到对于有多选上传的童鞋不是很友好
   * 就无论你传递几个视频 这里都统一一起上传
   * */
  videoUpload.startAll()
}

3. index.vue中

<template>
  <div>
    <input
      type="file"
      ref="files"
      multiple="multiple"
      @change="handleFileAL"
    >
  </div>
</template>

<script>
import { uploadFile } from './uopladFile.js'

export default {
  data() {
    return {
      fileSetting: {
        desc: 'i am desc', // 描述
        cataid: 1615514002553, // 分类ID 可以后端传递 也可以不写 或写死
        tag: 'i am tag', // 标签
        luping: 0, // 是否开启视频课件优化处理，对于上传录屏类视频清晰度有所优化：0为不开启，1为开启
        keepsource: 1 // 是否源文件播放（不对视频进行编码）：0为编码，1为不编码
      }
    }
  },
  mounted() {},
  methods: {
    handleFileAL(event) {
      if (!event.target.value) {
        this.$message.error('请选择您要上传的文件')
        return false
      }
      /**
       * @Date: 2021/3/26
       * @param: event.target.files -> 传递的文件list
       * @param: this.fileSetting -> 常规配置 上面有备注
       * @param: 回调
       */
      uploadFile(event.target.files, this.fileSetting, (index, event) => {
        console.log(index, event)
      })
    }
  }
}
</script>

如果上传之后一段时间无法观看， 请不要惊慌，因为视频时需要审核的 具体你可以看保利威后台的进度;

经过以上的步骤 相信你已经把视频上传到保利威了 ;

那么可能有童鞋会问了 只有上传你让我怎么看啊 ;

请继续往下看;

web端播放保利威视频

uni-app中播放保利威视频