提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

阿里云视频播放

阿里 视频 播放
2023-06-13 09:17:15 时间

阿里云视频播放

一、概述

  阿里云播放器SDK（Aliplayer SDK）是阿里视频云端到云到端服务的重要一环，支持视频加密播放、清晰度切换、直播时移等业务场景，本文说明并提供了Web端播放器的在线配置、功能展示、微信小程序等Demo体验。为您提供简单、快速、安全、稳定的视频播放服务。   Aliplayer SDK提供了在线配置功能，同时生成可运行的代码，方便用户集成播放器，访问地址请参见在线配置。   阿里云播放器SDK文档地址：https://help.aliyun.com/document_detail/125547.html

二、两种播放方式测试

2.1 第一种：播放地址播放

引入脚本和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>

加入视频播放地址，在上面的配置再加一项：

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

这里我用我给阿里云上传的视频测试，将下面的图片中视频地址赋值给上面的source配置项

完整测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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-ff4c752a3f7f11eca76a00163e1a625e.oss-cn-shanghai.aliyuncs.com/sv/4190b848-17d338d94e3/4190b848-17d338d94e3.mp4?Expires=1637306353&OSSAccessKeyId=LTAIVVfYx6D0HeL2&Signature=XuRTYd2R2aXgoBNzLOWX7Xx9Aps%3D'
    },function(player){
        console.log('播放器创建好了。')
    });
</script>

</body>
</html>

访问测试：

2.2 第二种：播放凭证播放(推荐)

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

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

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

2.2.1 获取视频播放凭证

这里需要单独写个controller去获取阿里云中视频的播放凭证 单独写个controller,根据视频id获取阿里云视频的播放凭证

//根据视频id获取视频的播放凭证
    @ApiOperation("根据视频id获取视频的播放凭证")
    @GetMapping("getPlayAuth/{id}")
    public R getPlayAuth(@PathVariable String id){
        try{
            //创建初始化对象
            DefaultAcsClient client = InitVodClient.initVodClient(ConstantVodUtils.ACCESS_KEY_ID, ConstantVodUtils.ACCESS_KEY_SECRET);
            //创建获取视频凭证的request和response
            GetVideoPlayAuthRequest request=new GetVideoPlayAuthRequest();

            //向request设置视频id
            request.setVideoId(id);

            //调用初始化对象的方法得到视频凭证
            GetVideoPlayAuthResponse response = client.getAcsResponse(request);
            String playAuth=response.getPlayAuth();
            return R.ok()
                    .data("playAuth",playAuth);
        }catch (Exception e){
            throw new GuliException(20001,"获取凭证失败");
        }
    }

视频id可以去阿里云中查看

2.2.2 前端完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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 : '49c422c27a6c43418b4edde88638cec0',
        playauth : 'eyJTZWN1cml0eVRva2VuIjoiQ0FJU2h3TjFxNkZ0NUIyeWZTaklyNWFBSGRuTTM2eGp3bytLVEhUVDNYcG1kUGwydFpEWWtUejJJSHBOZTNocUIrMGZzUGt3bEdsVTZmZ2Nsck1xRmNBZUdSV2FONXNodGNVR3IxLzRKcExGc3QySjZyOEpqc1UyamZsQ3NGbXBzdlhKYXNEVkVmbDJFNVhFTWlJUi8wMGU2TC8rY2lyWXBUWEhWYlNDbFo5Z2FQa09Rd0M4ZGtBb0xkeEtKd3hrMnQxNFVtWFdPYVNDUHdMU2htUEJMVXhtdldnR2wyUnp1NHV5M3ZPZDVoZlpwMXI4eE80YXhlTDBQb1AyVjgxbExacGxlc3FwM0k0U2M3YmFnaFpVNGdscjhxbHg3c3BCNVN5Vmt0eVdHVWhKL3phTElvaXQ3TnBqZmlCMGVvUUFQb3BGcC9YNmp2QWF3UExVbTliWXhncGhCOFIrWGo3RFpZYXV4N0d6ZW9XVE84MCthS3p3TmxuVXo5bUxMZU9WaVE0L1ptOEJQdzQ0RUxoSWFGMElVRTF4Rm11Q2QvWDRvQXlhTzF2NkdwTG9pdjltamNCSHFIeno1c2VQS2xTMVJMR1U3RDBWSUpkVWJUbHpiVWRKakRhL0wvWllMbE1jS2c4NFdlaVBNYXgzYlFGRHI1M3ZzVGJiWHpaYjBtcHR1UG56ZHhBS0RqK2FxMUdVR29BQktyOHRkb1Q1OVlxVTVrbXVxRFY2T1hLc3N4UEpJZks3MmlFM2hpWWt1SHpPS1N2Wnp3emNaMkxZbVNTQ2RXd1VjU2FIOWpVc05OSy9BQ0NmZmRUVlluMnQxakl3N3lXeHdicWVDNTE3Tms1Tk0yTk45T0hPNjcrWkxDYmhPcHpYdjZiSkFJWU92ZnArVkxKVnlJSTM4aFVpYWFzZTFMbVpaOFZkSWZXQisrYz0iLCJBdXRoSW5mbyI6IntcIkNJXCI6XCJCUHFObWZZdmZIZVhWT2lraWpBRmpMU2tQemx0bjhkUzVPMWdPbXphdnZCcXNzK3dVRm1WSnQzUlo5Ylc3UEo2XCIsXCJDYWxsZXJcIjpcIlFDWGZMWlBoR1N2QmErcEhIOUtUSTJNazJTd1NoRGR5RUZmaktoVFZwQms9XCIsXCJFeHBpcmVUaW1lXCI6XCIyMDIxLTExLTE5VDA3OjE4OjQ2WlwiLFwiTWVkaWFJZFwiOlwiNDljNDIyYzI3YTZjNDM0MThiNGVkZGU4ODYzOGNlYzBcIixcIlNpZ25hdHVyZVwiOlwia20yZnpYa3ZiQkQwa09MeXJMTGE4R056YUpvPVwifSIsIlZpZGVvTWV0YSI6eyJTdGF0dXMiOiJOb3JtYWwiLCJWaWRlb0lkIjoiNDljNDIyYzI3YTZjNDM0MThiNGVkZGU4ODYzOGNlYzAiLCJUaXRsZSI6IjYgLSBXaGF0IElmIEkgV2FudCB0byBNb3ZlIEZhc3RlciIsIkNvdmVyVVJMIjoiaHR0cDovL291dGluLWZmNGM3NTJhM2Y3ZjExZWNhNzZhMDAxNjNlMWE2MjVlLm9zcy1jbi1zaGFuZ2hhaS5hbGl5dW5jcy5jb20vNDljNDIyYzI3YTZjNDM0MThiNGVkZGU4ODYzOGNlYzAvc25hcHNob3RzLzEyZDA3ZmUyMWI5MDQ4ODFhOWQzZTcyYWEwZDc0ZTJhLTAwMDAxLmpwZz9FeHBpcmVzPTE2MzczMDk4MjYmT1NTQWNjZXNzS2V5SWQ9TFRBSVZWZll4NkQwSGVMMiZTaWduYXR1cmU9WHNnRE1SZ0RUbjRFWjVjSmdWMWlPUE0lMkJzdlElM0QiLCJEdXJhdGlvbiI6MTYuMjc2N30sIkFjY2Vzc0tleUlkIjoiU1RTLk5VNVZjeDJzQnVNYU5SYjl6M3h2WlpVc3MiLCJBY2Nlc3NLZXlTZWNyZXQiOiJHOW5tbkx6YTdNYmIzaHhKWDRyUTRDWXZ1ekJHSjRncmZDUW92UWZMdExSQiIsIlJlZ2lvbiI6ImNuLXNoYW5naGFpIiwiQ3VzdG9tZXJJZCI6MTY3MzQxNjI4OTM5OTY0MX0='
    },function(player){
        console.log('播放器创建好了。')
    });
</script>
</body>
</html>

实现效果和播放地址那个方式是一样的，就不截图了。

2.2.3 相关依赖

  依赖请去阿里云SDK文档里面自行下载，我下面没指定版本号是因为在父项目中指定过了，我的是微服务项目，你根据自己情况。这个版本一定要去官网查，别用别人的，由于有的jar包没有开源，你可能还得手动导入到本地的maven仓库。 

 <dependencies>
        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-java-sdk-core</artifactId>
        </dependency>
        <dependency>
            <groupId>com.aliyun.oss</groupId>
            <artifactId>aliyun-sdk-oss</artifactId>
        </dependency>
        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-java-sdk-vod</artifactId>
        </dependency>
        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-sdk-vod-upload</artifactId>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
        </dependency>
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
        </dependency>
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
        </dependency>

        <dependency>
            <groupId>joda-time</groupId>
            <artifactId>joda-time</artifactId>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.jdom/jdom -->
        <dependency>
            <groupId>org.jdom</groupId>
            <artifactId>jdom</artifactId>
            <version>1.1</version>
        </dependency>
    </dependencies>

三、总结

  上面只是我的测试代码，我自己的业务需求是，实现课程视频的播放，课程有章节和小节组成，一个章节对应多个小节，每个小节都有对应的视频，点击视频之后，实现视频的播放功能。   这里我只是测试，实现的功能比较简单，当然，还有好多配置并没有加入，比如清晰度、自动播放、循环播放、倍速、弹幕、加广告等等。这些你如果需要的话，可以去查看官方文档：https://player.alicdn.com/aliplayer/presentation/index.html

相关文章