我是靠谱客的博主 笨笨白羊,这篇文章主要介绍阿里云视频点播配置及使用HTML5页面播放1、初始化向导2、全局设置3、安全管理4、视频管理5、视频审核6、HTML5页面播放7、测试,现在分享给大家,希望可以做个参考。

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

092325_gdnm_3452433.png

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

1、初始化向导

视频访问域名

100638_2hjw_3452433.png

 

绑定CNAME

100740_hnvi_3452433.png

100927_hoj2_3452433.png

101141_1vma_3452433.png

 

2、全局设置

转码设置

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

141339_ud2x_3452433.png

102059_8lwv_3452433.png

 

审核设置

105525_1hfw_3452433.png

添加水印

加个水印逼格高

102447_tsnp_3452433.png

域名管理

一个暂时够用

102605_txlc_3452433.png

分类管理

102802_6zx9_3452433.png

回调设置

 

下载设置

不允许下载

102954_xlxy_3452433.png

3、安全管理

播放鉴权

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

103159_y4o4_3452433.png

防盗链

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

164143_wbr6_3452433.png

URL鉴权

103825_ikci_3452433.png

用量阈值

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

103945_vpko_3452433.png

4、视频管理

上传视频

104335_gpfu_3452433.png

 

等待转码

104457_pccx_3452433.png

设置基本信息

104916_7zwi_3452433.png

 

获取视频地址

104957_txjs_3452433.png

获取播放器代码

105023_jbuf_3452433.png

 

5、视频审核

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

105751_w5cp_3452433.png

 

6、HTML5页面播放

获取播放凭证(playauth)

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

在POM文件中增加依赖

复制代码
1
2
3
4
5
6
7
8
9
10
11
<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代码

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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(); } }

 

控制层代码

复制代码
1
2
3
4
5
6
7
8
@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"; }

页面代码

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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、测试

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

经过测试可以正常播放。

转载于:https://my.oschina.net/u/3452433/blog/1575908

最后

以上就是笨笨白羊最近收集整理的关于阿里云视频点播配置及使用HTML5页面播放1、初始化向导2、全局设置3、安全管理4、视频管理5、视频审核6、HTML5页面播放7、测试的全部内容,更多相关阿里云视频点播配置及使用HTML5页面播放1、初始化向导2、全局设置3、安全管理4、视频管理5、视频审核6、HTML5页面播放7、测试内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(97)

评论列表共有 0 条评论

立即
投稿
返回
顶部