整合阿里云视频播放

最新推荐文章于 2024-05-08 16:20:44 发布

程序猿二鍋頭

最新推荐文章于 2024-05-08 16:20:44 发布

阅读量6.1k

点赞数 1

分类专栏：谷粒在线教育项目大前端文章标签： vue javascript html

本文链接：https://blog.csdn.net/qq_45441466/article/details/113897357

版权

谷粒在线教育项目同时被 2 个专栏收录

31 篇文章 11 订阅

订阅专栏

大前端

21 篇文章 0 订阅

订阅专栏

一、阿里云视频播放测试

一、获取播放地址播放

获取播放地址

参考文档：https://help.aliyun.com/document_detail/61064.html

前面的 03-使用服务端SDK 介绍了如何获取非加密视频的播放地址。直接使用03节的例子获取加密视频播放地址会返回如下错误信息

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");

此种方式获取的视频文件不能直接播放，必须使用阿里云播放器播放

二、视频播放器

参考文档：https://help.aliyun.com/document_detail/61109.html

1、视频播放器介绍

阿里云播放器SDK（ApsaraVideo Player SDK）是阿里视频服务的重要一环，除了支持点播和直播的基础播放功能外，深度融合视频云业务，如支持视频的加密播放、安全下载、清晰度切换、直播答题等业务场景，为用户提供简单、快速、安全、稳定的视频播放服务。

2、集成视频播放器

参考文档：https://help.aliyun.com/document_detail/51991.html

参考【播放器简单使用说明】一节

引入脚本文件和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',  
            //播放配置  todo


        },function(player){
            console.log('播放器创建好了。')
        });
    </script>
</body>

3、播放地址播放

在Aliplayer的配置参数中添加如下属性

//播放方式一：支持播放地址播放,此播放优先级最高，此种方式不能播放加密视频
source : '你的视频播放地址',

源码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <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>
</head>

<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',
      //播放配置
      //根据视频地址播放
      //播放方式一：支持播放地址播放,此播放优先级最高，此种方式不能播放加密视频
      source: 'https://outin-512d574a45f211eb916e00163e06123c.oss-cn-shanghai.aliyuncs.com/sv/3b22ebae-17753d55e42/3b22ebae-17753d55e42.mp4?Expires=1613800246&OSSAccessKeyId=LTAIxSaOfEzCnBOj&Signature=uXUxVJLKKHuzNJAM65DzGg%2FY8UQ%3D',
    }, function (player) {
      console.log('播放器创建好了。')
    });
  </script>

</body>

</html>

启动浏览器运行，测试视频的播放

4、播放凭证播放（推荐）

阿里云播放器支持通过播放凭证自动换取播放地址进行播放，接入方式更为简单，且安全性更高。播放凭证默认时效为100秒（最大为3000秒），只能用于获取指定视频的播放地址，不能混用或重复使用。如果凭证过期则无法获取播放地址，需要重新获取凭证。

encryptType:'1',//如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
vid : '视频id',
playauth : '视频授权码',

注意：播放凭证有过期时间，默认值：100秒。取值范围：100~3000。

设置播放凭证的有效期

在获取播放凭证的测试用例中添加如下代码

request.setAuthInfoTimeout(200L);

源码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <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>
</head>

<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',
      //播放配置
      //播放凭证播放
      encryptType: '1',//如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
      vid: '38846aa7d86140c49e71794ffcb1bd51',
      playauth: 'eyJTZWN1cml0eVRva2VuIjoiQ0FJU2h3TjFxNkZ0NUIyeWZTaklyNWIwQ3VyejNMaDdoWkd5UVZMM3Mya0ZmZVVkckp6QnNUejJJSGhKZVhOdkJPMGV0ZjQrbVdCWTdQY1lsck1xRWNBY0dCeWFNSk12dnNnTHIxejVKcExGc3QySjZyOEpqc1ZzdUlZTG1GaXBzdlhKYXNEVkVmbDJFNVhFTWlJUi8wMGU2TC8rY2lyWXBUWEhWYlNDbFo5Z2FQa09Rd0M4ZGtBb0xkeEtKd3hrMnQxNFVtWFdPYVNDUHdMU2htUEJMVXhtdldnR2wyUnp1NHV5M3ZPZDVoZlpwMXI4eE80YXhlTDBQb1AyVjgxbExacGxlc3FwM0k0U2M3YmFnaFpVNGdscjhxbHg3c3BCNVN5Vmt0eVdHVWhKL3phTElvaXQ3TnBqZmlCMGVvUUFQb3BGcC9YNmp2QWF3UExVbTliWXhncGhCOFIrWGo3RFpZYXV4N0d6ZW9XVE84MCthS3p3TmxuVXo5bUxMZU9WaVE0L1ptOEJQdzQ0RUxoSWFGMElVRUJ6RUc2Q2QvWDRvZ21hT2xmeUZaTG9pdjltamNCSHFIeno1c2VQS2xTMVJMR1U3RDBWSUpkVWJUbHpiME5MaHpPOEwvZGRLVjBSSXdNOVZ1eVBNYXgzYlFGRHI1M3ZzVGJiWHpaYjBtcHR1UG56ZHp0ZlB4elo3Q09WR29BQmQ4bUtMVkxYZ1QrUHgyMk0zM0VsV1hMVGltcTF3V25uYVorUUE1VTRzSTJlOXl2R3hBOGdUcjk3akpncTI0NEk2TThWRGExQUtOVDY1RTNISEZXczhxV1U5Y1czM1pGeVYwYUZQdXJPWStJZVg0VG5PMjZVYndpTUhublB6MkZQSEN2VzB2YW5adDJCMUJoNStxYjBuODBYNXBkUkJmQmxRQzBrQlhiVkZVND0iLCJBdXRoSW5mbyI6IntcIkNJXCI6XCJ3ZlFST29LS29yM1JFTkRwbFY1cFRDME1UVXBLeDNZaWtERy9zbk9PL2tSNVpKeHNyckpqMjAzNDBZTkFDZmhIXCIsXCJDYWxsZXJcIjpcIjZjQWRTRlgrTFVTZWQ2blowRG5wYnUrdmNzVnp1eE5rRmtqc0lXS2xudVU9XCIsXCJFeHBpcmVUaW1lXCI6XCIyMDIxLTAyLTIwVDA0OjU2OjU0WlwiLFwiTWVkaWFJZFwiOlwiMzg4NDZhYTdkODYxNDBjNDllNzE3OTRmZmNiMWJkNTFcIixcIlNpZ25hdHVyZVwiOlwieGZUTlIzSU0wbndBa1VmUHd5ckhlWkxmOG9jPVwifSIsIlZpZGVvTWV0YSI6eyJTdGF0dXMiOiJOb3JtYWwiLCJWaWRlb0lkIjoiMzg4NDZhYTdkODYxNDBjNDllNzE3OTRmZmNiMWJkNTEiLCJUaXRsZSI6IjYgLSBXaGF0IElmIEkgV2FudCB0byBNb3ZlIEZhc3RlciIsIkNvdmVyVVJMIjoiaHR0cDovL291dGluLTUxMmQ1NzRhNDVmMjExZWI5MTZlMDAxNjNlMDYxMjNjLm9zcy1jbi1zaGFuZ2hhaS5hbGl5dW5jcy5jb20vMzg4NDZhYTdkODYxNDBjNDllNzE3OTRmZmNiMWJkNTEvc25hcHNob3RzLzk4ZmNlYTBlNTYwMDQ2MzRhZjI4YjQzMGRlMDIxYjdhLTAwMDAxLmpwZz9FeHBpcmVzPTE2MTM4MDA1MTQmT1NTQWNjZXNzS2V5SWQ9TFRBSXhTYU9mRXpDbkJPaiZTaWduYXR1cmU9ZjJ1elVvU3J6VnV4czZRZVJxNmpQRHFHUGFRJTNEIiwiRHVyYXRpb24iOjE2LjI3Njd9LCJBY2Nlc3NLZXlJZCI6IlNUUy5OVUFBUEcxZ1oyU1lDdEZXaVBxajFDWWpTIiwiQWNjZXNzS2V5U2VjcmV0IjoiRjFNRkNSSFc0OG1ocHphV3FHalNhR2tnUktMNlBacFc0bVd4cW9RalptenAiLCJSZWdpb24iOiJjbi1zaGFuZ2hhaSIsIkN1c3RvbWVySWQiOjEyNzE1ODY1MDc4NDQ2NzB9',
    }, function (player) {
      console.log('播放器创建好了。')
    });
  </script>

</body>

</html>

在线配置参考：https://player.alicdn.com/aliplayer/setting/setting.html

二、整合阿里云视频播放器

一、后端获取播放凭证

1、VideoController

service-vod微服务中创建 VideoController.java

controller中创建 getVideoPlayAuth 接口方法

@ApiOperation(value = "根据视频id获取视频凭证")
    @GetMapping("/getPlayAuth/{id}")
    public R getPlayAuth(@PathVariable String id){
        try{
            //创建初始化对象
            DefaultAcsClient client = InitVodObject.initVodClient(ConstantPropertiesUtils.ACCESS_KEY_ID, ConstantPropertiesUtils.ACCESS_KEY_SECRET);
            //创建获取凭证request和response对象
            GetVideoPlayAuthRequest request = new GetVideoPlayAuthRequest();
            //想request设置视频id
            request.setVideoId(id);
            //调用方法得到凭证
            GetVideoPlayAuthResponse response = client.getAcsResponse(request);
            return R.ok().data("playAuth",response.getPlayAuth());
        }catch (Exception e){
            return R.error();
        }
    }

2、Swagger测试

二、前端播放器整合

1、点击播放超链接

course/_id.vue

修改课时目录超链接

<a
   :href="'/player/'+video.videoSourceId"
   :title="video.title"
   target="_blank">

2、layout

因为播放器的布局和其他页面的基本布局不一致，因此创建新的布局容器 layouts/video.vue

<template>
  <div class="guli-player">
    <div class="head">
      <a href="#" title="谷粒学院">
        <img class="logo" src="~/assets/img/logo.png" lt="谷粒学院" />
      </a>
    </div>

    <div class="body">
      <div class="content"><nuxt /></div>
    </div>
  </div>
</template>

<script>
export default {};
</script>


<style>
html,
body {
  height: 100%;
}
</style>


<style scoped>
.head {
  height: 50px;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;
}

.head .logo {
  height: 50px;

  margin-left: 10px;
}

.body {
  position: absolute;

  top: 50px;

  left: 0;

  right: 0;

  bottom: 0;

  overflow: hidden;
}
</style>

3、api

创建api模块 api/vod.js，从后端获取播放凭证

import request from '@/utils/request';

export default {
  getPlayAuth(vid) {
    return request({
      url: `/eduvod/video/getPlayAuth/${vid}`,
      method: 'get'
    })
  }
}

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

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

5、创建播放页面

创建 pages/player/_vid.vue

（1）引入播放器js库和css样式

<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>

（2）获取播放凭证

import vodApi from "@/api/vod/vod";
export default {
  layout: "video", //应用video布局
  asyncData({ params, error }) {
    return vodApi.getPlayAuth(params.vid).then((response) => {
      return {
        vid: params.vid,
        playAuth: response.data.data.playAuth,
      };
    });
  },
}

（3）创建播放器

mounted() {
    //页面渲染之后执行
    new Aliplayer(
      {
        id: "J_prismPlayer",
        vid: this.vid, // 视频id
        playauth: this.playAuth, // 播放凭证
        encryptType: "1", // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
        width: "100%",
        height: "500px",
      },
      function (player) {
        console.log("播放器创建成功");
      }
    );
  }

（4）其他常见的可选配置

// 以下可选设置
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

完整源码：

<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 vodApi from "@/api/vod/vod";
export default {
  layout: "video", //应用video布局
  asyncData({ params, error }) {
    return vodApi.getPlayAuth(params.vid).then((response) => {
      return {
        vid: params.vid,
        playAuth: response.data.data.playAuth,
      };
    });
  },
  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>

6、加入播放组件

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

程序猿二鍋頭

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
整合阿里云视频播放

一、阿里云视频播放测试一、获取播放地址播放获取播放地址参考文档：https://help.aliyun.com/document_detail/61064.html前面的03-使用服务端SDK介绍了如何获取非加密视频的播放地址。直接使用03节的例子获取加密视频播放地址会返回如下错误信息Currently only the AliyunVoDEncryption stream exists, you must use the Aliyun player to play or set t..
复制链接

扫一扫