14901688.html

一、獲取播放地址播放

獲取播放地址

參考文檔： https://help.aliyun.com/document_detail/61064.html

Aliplayer Web播放器功能介紹： https://developer.aliyun.com/article/236764

獲取加密視頻播放地址會返回如下錯誤信息

Currently only the AliyunVoDEncryption stream exists, you must use the Aliyun player to play or set the value of ResultType to Multiple.

目前只有AliyunVoDEncryption流存在，您必須使用Aliyun player來播放或將ResultType的值設置為Multiple。

因此在testGetPlayInfo測試方法中添加 ResultType 參數，並設置為true

privateParams.put("ResultType", "Multiple");

此種方式獲取的視頻文件不能直接播放，必須使用阿里雲播放器播放

二、視頻播放器

1、視頻播放器介紹

阿里雲播放器SDK（ApsaraVideo Player SDK）是阿里視頻服務的重要一環，除了支持點播和直播的基礎播放功能外，深度融合視頻雲業務，如支持視頻的加密播放、安全下載、清晰度切換、直播答題等業務場景，為用戶提供簡單、快速、安全、穩定的視頻播放服務。

2、集成視頻播放器

引入腳本文件和css文件

<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"></script>

初始化視頻播放器

<body>
    <div  class="prism-player" id="J_prismPlayer"></div>
    <script>
        var player = new Aliplayer({
            id: 'J_prismPlayer',
            width: '100%',
            autoplay: false,
            cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',  
            //播放配置
        },function(player){
            console.log('播放器創建好了。')
        });
    </script>
</body>

3、播放地址播放

在Aliplayer的配置參數中添加如下屬性

//播放方式一：支持播放地址播放,此播放優先級最高，此種方式不能播放加密視頻
source : '你的視頻播放地址',

4、播放憑證播放（推薦）

阿里雲播放器支持通過播放憑證自動換取播放地址進行播放，接入方式更為簡單，且安全性更高。播放憑證默認時效為100秒（最大為3000秒），只能用於獲取指定視頻的播放地址，不能混用或重復使用。如果憑證過期則無法獲取播放地址，需要重新獲取憑證。

encryptType:'1',//如果播放加密視頻，則需設置encryptType=1，非加密視頻無需設置此項
vid : '視頻id',
playauth : '視頻授權碼',

注意：播放憑證有過期時間，默認值：100秒。取值范圍：100~3000。

設置播放憑證的有效期

在獲取播放憑證的測試用例中添加如下代碼

request.setAuthInfoTimeout(200L);

在線配置參考：https://player.alicdn.com/aliplayer/setting/setting.html

5、播放組件相關文檔

在線配置： https://player.alicdn.com/aliplayer/setting/setting.html

功能展示： https://player.alicdn.com/aliplayer/presentation/index.html

三、視頻播放例子（播放憑證播放）

1、InitVodClient類，初始化對象

package com.stu.vod.utils;

import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.profile.DefaultProfile;

public class InitVodClient {
    public static DefaultAcsClient initVodClient(String accessKeyId, String accessKeySecret) throws ClientException {
        String regionId = "cn-shanghai";  // 點播服務接入區域,固定的
        DefaultProfile profile = DefaultProfile.getProfile(regionId, accessKeyId, accessKeySecret);
        DefaultAcsClient client = new DefaultAcsClient(profile);
        return client;
    }
}

2、controller類，根據視頻id獲取視頻的播放憑證

package com.stu.vod.controller;

import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.vod.model.v20170321.GetVideoPlayAuthRequest;
import com.aliyuncs.vod.model.v20170321.GetVideoPlayAuthResponse;
import com.stu.commonutils.ResultData;
import com.stu.servicebase.exceptionHandler.GuliException;
import com.stu.vod.service.VodService;
import com.stu.vod.utils.ConstantVodUtils;
import com.stu.vod.utils.InitVodClient;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.util.List;

@RestController
@RequestMapping("/eduvod/video")

@CrossOrigin
public class VodController {


    //根據視頻id獲取視頻的播放憑證
    @GetMapping("getAlyVideoAuth/{id}")
    public ResultData getAlyVideoAuth(@PathVariable String id){

        try {
            //1.1創建初始化對象
            //創建初始化對象
            DefaultAcsClient client = InitVodClient.initVodClient(ConstantVodUtils.KEY_ID,ConstantVodUtils.KEY_SECRET);
            //1.2創建獲取視頻地址response和request對象
            GetVideoPlayAuthRequest request = new GetVideoPlayAuthRequest();
            GetVideoPlayAuthResponse response = new GetVideoPlayAuthResponse();
            //1.3向request對象里面設置視頻id
            request.setVideoId(id);
            //1.4調用初始化對象里的方法，取得憑證
            response = client.getAcsResponse(request);
            String playAuth = response.getPlayAuth();
            return ResultData.success().data("playAuth",playAuth);
        } catch (ClientException e) {
            throw new GuliException(20001,"獲取憑證失敗");
        }

    }
}

3、vue文件

<template>
  <div>

    <!-- 阿里雲視頻播放器樣式 -->
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" >
    <!-- 阿里雲視頻播放器腳本 -->
    <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js" />

    <!-- 定義播放器dom -->
    <div id="J_prismPlayer" class="prism-player" />
  </div>
</template>
<script>
import vod from '@/api/vod'
 
export default {
    
  layout: 'video',//應用video布局
  asyncData({ params, error }){
    //這個return teacheApi的return后邊不能回車換行
    return vod.getAlyVideoAuth(params.vid)
    .then(res=>{

      // this.data = res.data.data;
      return {  
        vid: params.vid,
        playAuth: res.data.data.playAuth

      }
      
    })

  },
 　//創建播放器
   /**
   * 頁面渲染完成時：此時js腳本已加載，Aliplayer已定義，可以使用
   * 如果在created生命周期函數中使用，Aliplayer is not defined錯誤
   */
  mounted() {
      new Aliplayer({
          id: 'J_prismPlayer',
          vid: this.vid, // 視頻id
          playauth: this.playAuth, // 播放憑證
          encryptType: '1', // 如果播放加密視頻，則需設置encryptType=1，非加密視頻無需設置此項
          width: '100%',
          height: '500px',
          // 以下可選設置
          cover: 'http://guli.shop/photo/banner/1525939573202.jpg', // 封面
          qualitySort: 'asc', // 清晰度排序

          mediaType: 'video', // 返回音頻還是視頻
          autoplay: false, // 自動播放
          isLive: false, // 直播
          rePlay: false, // 循環播放
          preload: true,
          controlBarVisibility: 'hover', // 控制條的顯示方式：鼠標懸停
          useH5Prism: true, // 播放器類型：html5
      }, function(player) {
          console.log('播放器創建成功')
      })
  }
}
</script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 阿里雲視頻播放-----獲取播放時長 vue實現視頻播放整合阿里雲視頻播放器 vue與阿里雲點播插件集成實現視頻上傳 springboot阿里雲視頻點播服務實現上傳視頻和刪除功能阿里雲視頻點播同層播放問題如何實現阿里雲視頻點播功能? vue實現視頻自動播放 springboot整合阿里雲視頻點播接口 SpringBoot實現阿里雲短信發送