Aliplayer视频点播加密播放
Aliplayer视频播放器填坑
aliplayer视频点播分为Flash和HTML5两个版本，移动端不支持Flash播放器。
Flash播放器兼容IE8+，HTML5播放器支持比较新的浏览器，对浏览器的版本要求较Flash播放器对浏览器的版本的要求要高一些。
其中：
h5播放器在移动端不支持flv和rtmp的播放
播放flv、m3u8视频，PC端支持的浏览器，需要启用允许跨域访问
HLS标准加密与MPS私有加密对比
| 加密类型/设备环境 | iOS | Android | PC |
|---|---|---|---|
| 标准加密 HLS | √ | √ | Chrome Firefox Safari Edge IE 11+for Windows8.1+ |
| 私有加密 MPS | × | Chrome for Android | Chrome Firefox Safari Edge IE 11+for Windows8.1+ |
Aliplayer播放器Demo
注：Aliplayer在线配置网址
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>用户测试用例</title>
<!-- aliplayer样式表 -->
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
<!-- aliplayer Flash版&HTML5版 -->
<script src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js" type="text/javascript" charset="utf-8"></script>
<!-- Flash版 -->
<script src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-flash-min.js" type="text/javascript" charset="utf-8"></script>
<!-- HTML5版 -->
<script src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-h5-min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="prism-player" id="J_prismPlayer"></div>
</body>
</html>
JavaScript代码：
var player = new Aliplayer({
id: 'J_prismPlayer',
width: '100%',
autoplay: true,
//支持播放地址播放,此播放优先级最高
source: '播放url',
//播放方式二：点播用户推荐
vid: '',
playauth: 'ddd',
cover: 'logo.png',
//播放方式三：仅MPS用户使用（私有加密播放）
vid: '',
accId: 'dd',
accSecret: 'dd',
stsToken: 'dd',
domainRegion: 'dd',
authInfo: 'dd',
//播放方式四：使用STS方式播放
vid: '',
accessKeyId: 'dd',
securityToken: 'dd',
accessKeySecret: 'dd',
region: 'cn-shanghai',
}, function(player) {
console.log('播放器创建好了。')
});
Vue中使用Aliplayer播发器
注：现在index.html中引入aliplayer的css和js，或者在当前vue文件中引入aliplayer的css和js。
<template>
...
<!-- 引入aliplayer播放器 -->
<div class="prism-player" id="player-con"></div>
...
</template>
初始化aliplayer播发器
export default {
data() {
return {
player: {},
timer: null
};
},
created() {
this.loading = this.$loading({
background: "rgba(0, 0, 0, 0.5)",
text: "拼命加载中"
});
},
methods: {
// 销毁和重建aliplayer
changePlayer(dt) {
this.player.dispose();
this.initPlayer(dt);
},
// 获取视频播放信息
getKeyInfo(videoId, flag) {
this.$axios.post(
"XXXXXToken",
qs.stringify({
videoId
})
).then(res => {
let data = res.data;
if (data.code == 1) {
let dt = data.result_data;
// 是否初次创建？初次创建播放器：销毁和重建播发器
flag ? this.initPlayer(dt) : this.changePlayer(dt);
}
});
},
// 初始化视频播放器
initPlayer(data) {
// 清空dom节点
document.getElementById("player-con").innerHTML = "";
// 改变this指向，使其指向当前this指向。
let _this = this,
token = sessionStorage.getItem("token"),
userId = sessionStorage.getItem("userId"),
isConfirm = sessionStorage.getItem("isConfirm");
this.player = new Aliplayer({
id: "player-con", // 播放器id
format: "m3u8", // 视频格式
width: "100%",
height: "450px",
playsinline: true,
preload: true,
encryptType: 1,
// HLS标准加密为0（默认）,MPS私有视频加密为1
controlBarVisibility: "always",
useH5Prism: true,
// 视频底部状态工具栏设置，默认为false，全显示
skinLayout: [{
name: "bigPlayButton",
align: "blabs",
x: 30,
y: 80
},
{
name: "H5Loading",
align: "cc"
},
{
name: "errorDisplay",
align: "tlabs",
x: 0,
y: 0
},
{
name: "infoDisplay"
},
{
name: "tooltip",
align: "blabs",
x: 0,
y: 56
},
{
name: "thumbnail"
},
{
name: "controlBar",
align: "blabs",
x: 0,
y: 0,
children: [{
name: "progress",
align: "blabs",
x: 0,
y: 44
},
{
name: "playButton",
align: "tl",
x: 15,
y: 12
},
{
name: "timeDisplay",
align: "tl",
x: 10,
y: 7
},
{
name: "fullScreenButton",
align: "tr",
x: 10,
y: 12
},
{
name: "volume",
align: "tr",
x: 5,
y: 10
}
]
}
],
// MPS
vid: 'vid',
accId: 'accId',
accSecret: 'accSecret',
stsToken: 'stsToken',
domainRegion: "cn-beijing",
authInfo: '{"ExpireTime": "' +
expireTime +
'","MediaId": "' +
videoId +
'","Signature": "' +
signature +
'"}'
},
function(player) {
// html5版本的视频事件写在当前callback中
player.play();
// 定时器
let clear = () => {
if (_this.timer) {
clearTimeout(_this.timer);
_this.timer = null;
}
};
// 获取播放时间
let getTimes = () => {
if (player.getCurrentTime() >= 60) {
if (isConfirm == 0) {
player.pause();
player.fullscreenService.cancelFullScreen();
}
}
// 递归回调，计算播放时间
_this.timer = setTimeout(getTimes, 1000);
};
player.on("ready", function(e) {
// 首次播放
clear();
getTimes();
player.on("play", function(e) {
// 播放视频
clear();
getTimes();
});
player.on("pause", function(e) {
// 暂停视频播放
clear();
});
player.on("ended", function(e) {
// 视频播放结束
clear();
});
player.on("error", function(e) {
// 视频播放失败
clear();
});
});
}
);
},
// 切换视频播放源：使用函数截流，防止多次触发影响数据展示
switchVideo: Debounce(function(index, videoId, isPerchase) {
this.mark = index;
this.getKeyInfo(videoId);
this.isPerchase = isPerchase == undefined ? true : isPerchase;
}, 500)
},
// 生命周期钩子函数：销毁
destroyed() {
// 清除定时器
clearInterval(this.timer);
this.timer = null;
let play = this.player,
len = Object.keys(play);
if (!len) return;
// 销毁播放器
play.dispose();
}
};
注：播放器中隐藏了画中画、画质切换、视频下载等功能。
同时需要注意的是，aliplayerH5视频点播的私有加密方式，在iOS苹果移动端是不支持的！
Aliplayer视频点播加密播放的更多相关文章
- 踩坑系列《十一》完美解决阿里云vod视频点播无法播放音频和视频点播控制台里的媒资库里面的视频无法播放
刚开始项目部署的时候,音频还是正常播放,后面直接报了 获取m3u8文件失败(manifestLoadError) 的错误,原因是 我的域名 xxx.com 这个域名没有解析到点播提供的CNAME上,所 ...
- wzplayer for android V1.6.1 (支持音视频加密播放)
1.更新 2013-11-25: 1.6.1 修复1.6.0版本对rk版本的支持. 以往版本: 1.6.0 1)1.6.0修改了所有默认音频渲染使用AudioTrack输出,这样只要不播放视频,能支持 ...
- EV加密播放器的分析过程+过虚拟机方法
开启了OD载入播放器进行分析,发现如下问题:1.播放器会进行翻录检测2.防止虚拟机播放3.视频播放后,可直接对内存操作提取出源视频翻录检测:主要是对指定的文件名或进程名对比虚拟机检测:是针对虚拟机特征 ...
- day89:luffy:使用Celery完成我的订单超时取消&Polyv视频加密播放
目录 1.我的订单超时取消 2.PoliV视频播放 1.我的订单超时取消 使用Celery完成超时取消功能 mycelery/order/tasks.py from mycelery.main imp ...
- 阿里云web播放器
原文地址:https://help.aliyun.com/document_detail/51991.html?spm=5176.doc61109.6.703.ZTCYoi 一.概念说明 1. pla ...
- 如何利用阿里视频云开源组件，快速自定义你的H5播放器？
摘要: Aliplayer希望提供一种方便.简单.灵活的机制,让客户能够扩展播放器的功能,并且Aliplayer提供一些组件的基本实现,用户可以基于这些开源的组件实现个性化功能,比如自定义UI和自己A ...
- 开源播放器 ijkplayer (一) ：使用Ijkplayer播放直播视频
1.ijkplayer 编码 IjkPlayer支持硬解码和软解码. 软解码时不会旋转视频角度这时需要你通过onInfo的what == IMediaPlayer.MEDIA_INFO_VIDEO_R ...
- PLDroidPlayer 是七牛推出的一款免费的适用于 Android 平台的播放器 SDK，采用全自研的跨平台播放内核，拥有丰富的功能和优异的性能，可高度定制化和二次开发。 https://developer.qiniu.com/pili/sdk/…
PLDroidPlayer PLDroidPlayer 是一个适用于 Android 平台的音视频播放器 SDK,可高度定制化和二次开发,为 Android 开发者提供了简单.快捷的接口,帮助开发者在 ...
- 基于阿里云直播实现视频推流(ffmpeg)/拉流(Django2.0)以及在线视频直播播放(支持http/https)功能
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_146 由于5g网络的光速推广,视频业务又被推上了风口浪尖,在2019年初我们还在谈论照片,短视频等关键字,而进入2020年,我们津 ...
随机推荐
- Linux用户和权限——用户和用户组管理
Linux用户和权限——用户和用户组管理 摘要:本文主要介绍了Linux系统中的用户和用户组管理. 用户和用户组 含义 在使用Linux系统时,虽然输入的是自己的用户名和密码,但其实Linux并不认识 ...
- annyconnect掉线之后重新链接
sudo service vpnagentd restart /opt/cisco/anyconnect/bin/vpnui 重启服务+重新登录 deepin的优点之一是它的程序不会安装到各个角落里, ...
- Laravel 运行php artisan serve命令时提示No application encryption key has been specified
创建了新的laravel项目后, 运行提示:No application encryption key has been specified 解决方法: 这个是由于没有配置好 APP_KEY 在终端上 ...
- Mysql EF Core 快速构建 Web Api
(1)首先创建一个.net core web api web项目; (2)因为我们使用的是ef连接mysql数据库,通过NuGet安装MySql.Data.EntityFrameworkCore,以来 ...
- 剑指offer 9-10:青蛙跳台阶与Fibonacii数列
题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 问题分析 我们将跳法个数y与台阶数n视为一个函数关系,即y=f(n). ...
- JMETER 使用随机变量
使用场景 在发起流程时,我们需要模拟实际情况,不同的用户可以产生不一样数量的流程实例,因此我们可以使用随机变量还进行模拟. 随机变量实例 1.添加一个循环计数器 2.添加一个循环 循环次数是根据随机变 ...
- Windows局域网共享遇到的问题
前言 接这篇:Windows 局域网内共享 我们的环境: 共享机:局域网内某台主机 windows 7 x64 客户端:windows 7 /windows 10 (各版本系统都有) 可以使用共享人数 ...
- 【BZOJ3716】[PA2014]Muzeum（贪心+网络流）
BZOJ 题意: 在二维网格图中有\(n\)个物品,每个物品有价值:但有\(m\)个警卫看管这些物品,每个警卫面朝\(y\)轴负方向,能看到一定角度(假定能够看到无穷远). 现在每个敬畏有一个贿赂价钱 ...
- css 序
盒模型 1.属性:width :内容的宽度 书写内容的宽度 height:内容的高度 书写内容的宽度 padding:内边框 内容到边框的距离 可以有 background-color borde ...
- JPA-save()方法会将字段更新为null的解决方法
今天在开发上碰到一个问题,在做页面展示的时候传给前端十个字段,前端修改了其中3个的值,所以只传了3个值给后端,其余字段默认为null,更新后其他7个字段在全部变为了空值. 在前端没法全量回传所有属性的 ...