阿里云视频点播配置及使用HTML5页面播放

最近公司要使用阿里云视频点播,实现手机端使用WAP进行视频播放。在这里将配置过程记录一下,以供日后参考。

1、初始化向导

视频访问域名

绑定CNAME

2、全局设置

转码设置

系统默认的对我来说已经足够,也可以自己添加

审核设置

添加水印

加个水印逼格高

域名管理

一个暂时够用

分类管理

回调设置

下载设置

不允许下载

3、安全管理

播放鉴权

在这里我们可以获得播放秘钥

防盗链

开启并设置白名单,只有使用本公司域名的服务器能够播放视频

URL鉴权

用量阈值

增加用量阈值,防止花冤枉钱

4、视频管理

上传视频

等待转码

设置基本信息

获取视频地址

获取播放器代码

5、视频审核

审核后的视频才能够正常播放(与设置有关)

6、HTML5页面播放

获取播放凭证(playauth)

官方说明:https://help.aliyun.com/document_detail/52858.html?spm=5176.doc57916.6.694.EKh6R8

在POM文件中增加依赖

      <dependency>
        <groupId>com.aliyun</groupId>
        <artifactId>aliyun-java-sdk-core</artifactId>
        <version>3.2.2</version>
      </dependency>
      <dependency>
        <groupId>com.aliyun</groupId>
        <artifactId>aliyun-java-sdk-vod</artifactId>
        <version>2.6.0</version>
      </dependency>

java代码

package com.plsoft.pmall.wap;

import com.aliyuncs.exceptions.ServerException;
import org.springframework.stereotype.Controller;
import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.profile.DefaultProfile;
import com.aliyuncs.profile.IClientProfile;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.vod.model.v20170321.GetVideoPlayAuthRequest;
import com.aliyuncs.vod.model.v20170321.GetVideoPlayAuthResponse;

/**
 * 阿里云视频
 */
@Controller
public class AliyunVideo {

    /**
     * 获取播放凭证
     * @param videoId
     * @return
     */
    public String getVideoPlayAuth(String videoId) {
        DefaultProfile profile = DefaultProfile.getProfile("cn-shanghai", "PF6eXqCrxcf6oWqn", "z6AG0ykF40000000000Geig2G08yi3");
        DefaultAcsClient client = new DefaultAcsClient(profile);

        GetVideoPlayAuthRequest request = new GetVideoPlayAuthRequest();
        request.setVideoId(videoId);
        GetVideoPlayAuthResponse response = null;
        try {
            response = client.getAcsResponse(request);
        } catch (ServerException e) {
            throw new RuntimeException("GetVideoPlayAuthRequest Server failed");
        } catch (ClientException e) {
            throw new RuntimeException("GetVideoPlayAuthRequest Client failed");
        }

        return response.getPlayAuth();
    }

}

控制层代码

 @RequestMapping(value = "/aliyun_video", method = RequestMethod.GET)
    public String aliyun_video(ModelMap model) {
        String vid = "8114b052c9b846cc887b38f83a07e517";
        String playAuth = getVideoPlayAuth(vid);
        model.addAttribute("playAuth", playAuth);
        model.addAttribute("vid", vid);
        return "/aliyun_video";
    }

页面代码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/1.9.2/skins/default/index.css"/>
    <script type="text/javascript" src="https://g.alicdn.com/de/prismplayer/1.9.2/prism.js"></script>
</head>
<body>
<div class="prism-player" id="J_prismPlayer"></div>
<script>
    var player = new prismplayer({id:"J_prismPlayer",autoplay:false,width:"100%",vid:"${vid}",playauth:"${playAuth}",});
</script>
</body>
</html>

7、测试

将项目部署在服务器上(必须是防盗链白名单添加的服务器)

经过测试可以正常播放。

猜你喜欢

转载自my.oschina.net/u/3452433/blog/1575908