开发者社区> 问答> 正文

请问用VOD-视频点播时,小程序使用上传地址和凭证上传视频后怎么在页面回显?

请问用VOD-视频点播时,小程序使用上传地址和凭证上传视频后怎么在页面回显?

展开
收起
三分钟热度的鱼 2023-05-15 21:06:43 185 0
1 条回答
写回答
取消 提交回答
  • 在小程序中上传视频到阿里云VOD-视频点播后,可以通过获取视频ID并使用阿里云VOD-视频点播提供的播放器组件在页面上回显视频。

    具体步骤如下:

    1、在小程序中使用阿里云VOD-视频点播提供的上传组件将视频上传到指定的上传地址,并获取上传凭证。

    2、在上传成功后,通过调用阿里云VOD-视频点播的API获取上传完成后的视频ID。

    3、使用阿里云VOD-视频点播提供的播放器组件,在页面上引入播放器,并设置视频ID作为播放器的参数。

    以下是示例代码:

    <!--在wxml中引入播放器组件-->
    <view class="player">
      <video id="player" vod="{{true}}" objectFit="contain"></video>
    </view>
    
    Page({
      // 获取视频ID并设置为播放器的参数
      getVideoInfo: function(uploadAddress, uploadAuth) {
        wx.request({
          url: 'https://vod.cn-shanghai.aliyuncs.com',
          method: 'POST',
          data: {
            Action: 'CreateUploadVideo',
            UploadAddress: uploadAddress,
            UploadAuth: uploadAuth
          },
          success: res => {
            const videoId = res.data.VideoId;
            // 将视频ID设置为播放器的参数
            this.setData({
              videoId: videoId
            });
          }
        });
      },
    
      onReady: function() {
        // 获取上传地址和凭证
        const uploadAddress = 'your upload address';
        const uploadAuth = 'your upload auth';
    
        // 调用获取视频ID的函数
        this.getVideoInfo(uploadAddress, uploadAuth);
    
        // 设置播放器的参数
        this.setData({
          playerOptions: {
            vid: this.data.videoId,
            playauth: uploadAuth,
            width: '100%',
            height: '100%',
            autoplay: true
          }
        });
      }
    });
    
    

    使用阿里云VOD-视频点播的播放器组件需要在页面的onReady生命周期中进行设置。同时,需要将视频ID作为播放器的参数传入,以便播放器能够正确地播放对应的视频。

    2023-05-16 08:03:45
    赞同 展开评论 打赏
来源圈子
更多
收录在圈子:
+ 订阅
问答排行榜
最热
最新

相关电子书

更多
互联网音视频点播业务云上实践 立即下载
《VoD问题排查与实战手册》 立即下载
低代码开发师(初级)实战教程 立即下载