vue使用阿里云视频点播

最新推荐文章于 2024-08-08 14:17:36 发布

像山里的风

最新推荐文章于 2024-08-08 14:17:36 发布

阅读量3.2k

点赞数 4

文章标签： vue.js javascript 阿里云

本文链接：https://blog.csdn.net/qq_42905523/article/details/122168577

版权

本文介绍了如何在Vue项目中使用阿里云视频点播服务，包括视频上传、播放功能的实现，并探讨了在uni-app微信小程序中对接视频点播的两种策略。

摘要由CSDN通过智能技术生成

vue使用阿里云视频点播——videoId + playauth的方式

一. 上传视频
官方文档https://help.aliyun.com/document_detail/52204.htm?spm=a2c4g.11186623.0.0.4885a393kRPguB#task-1995648

1.在index.html页面引入JavaScript脚本。

<script src="/static/aliyun-oss-sdk.min.js"></script>
<script src="/static/aliyun-upload-sdk-1.5.2.min.js"></script>
<script src="/static/es6-promise.min.js"></script>

具体代码，已有视频时回显并且可以查看视频、删除视频；没有视频显示上传视频

<template>
  <div class="container">
    <div class="upload">
      <div class="preview" @click="onpreview(file)" v-if="coverURL">
        <img :src="coverURL" alt="" class="imgUrl">
        <div class="play-icon el-icon-video-play"></div>
        <span class="el-icon-circle-close cancel" @click.stop="deleteVideo"></span>
      </div>
      <div>
        <input type="file" id="fileUpload" @change="fileChange($event)">
        <label class="status">上传状态: <span>{
   {
   statusText}}</span></label>
      </div>
      <div class="upload-type">
        <button @click="authUpload" :disabled="uploadDisabled">开始上传</button>
        <button @click="pauseUpload" :disabled="pauseDisabled">暂停</button>
        <button :disabled="resumeDisabled" @click="resumeUpload">恢复上传</button>
        <span class="progress">上传进度: <i id="auth-progress">{
   {
   authProgress}}</i> %</span>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    getVideoUploadAuth, refreshVideoUploadAtuh, getPlayAuth } from '@/api/common.js' // 后端提供的接口：获取视频上传凭证、刷新上传凭证、获取视频播放凭证
  import config from '@/utils/videoSort.js' // 后端提供的视频分类信息，包含sort名、cateId、description等
  import Previewer from '@/components/VideoPlayer/index' // 查看视频

  export default {
   
    model: {
   
      prop: 'value',
      event: 'sync'
    },
    props: {
   
      value: {
   
        type: [Array, String],
        default: () => []
      },
      sort: {
    // 后端提供的视频分类
        type: String,
        default: ''
      },
      vId: {
    // 已有视频时父组件传入的vid
        type: String,
        default: ''
      }
    },
    data () {
   
      return {
   
        videoSortParams: '', // 根据父组件传入的sort，查找config中对应的分类信息
        timeout: '',
        partSize: '',
        parallel: '',
        retryCount: '',
        retryDuration: '',
        region: 'cn-shanghai',
        userId: '123456', // 必填，只需有值即可
        file: null,
        authProgress: 0,
        uploadDisabled: true,