點播播放
就是獲取到文件id和appID就能實現播放
繼上篇上傳視頻 https://www.cnblogs.com/rzkwz/p/15396582.html
在線獲取視頻預覽
注意:播放前提需要在上傳任務流模板
騰訊雲提供了通過客戶端上傳簽名 中的procedure參數，指定視頻上傳后要執行的任務
js
var getSignature = function(callback) {
$.ajax({
url : "getSign", //服務器獲取客戶端上傳簽名的URL
type : "POST",
success:function(data){
var dataObj = eval("(" + data + ")");
callback(dataObj.signature);
}
});
};
getSin.class
@RequestMapping("/getSign")
@ResponseBody
public String getSign() {
logger.info("獲取簽名中...");
//得到Sign
Signature sign = new Signature();
//個人API密鑰中的Secret Id
sign.setSecretId(accessKeyId);
//個人API密鑰中的Secret Key
sign.setSecretKey(accessKeySecret);
sign.setCurrentTime(System.currentTimeMillis() / 1000);
sign.setRandom(new Random().nextInt(java.lang.Integer.MAX_VALUE));
sign.setSignValidDuration(3600 * 24 * 2);
String signature = null;
try {
JSONObject jsonObject = new JSONObject();
signature = sign.getUploadSignature();
System.out.println("signature : " + signature);
jsonObject.put("signature",signature);
logger.info("返回簽名中--end");
return jsonObject.toString();
} catch (Exception e) {
System.out.print("獲取簽名失敗");
logger.info("獲取簽名失敗");
e.printStackTrace();
return null;
}
}
Signature.class
在任務流處可以添加你所需的參數
import sun.misc.BASE64Encoder;
import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;
public class Signature {
private String secretId;
private String secretKey;
private long currentTime;
private int random;
private int signValidDuration;
private static final String HMAC_ALGORITHM = "HmacSHA1";
private static final String CONTENT_CHARSET = "UTF-8";
public static byte[] byteMerger(byte[] byte1, byte[] byte2) {
byte[] byte3 = new byte[byte1.length + byte2.length];
System.arraycopy(byte1, 0, byte3, 0, byte1.length);
System.arraycopy(byte2, 0, byte3, byte1.length, byte2.length);
return byte3;
}
public String getUploadSignature() throws Exception {
String strSign = "";
String contextStr = "";
long endTime = (currentTime + signValidDuration);
contextStr += "secretId=" + java.net.URLEncoder.encode(secretId, "utf8");
contextStr += "¤tTimeStamp=" + currentTime;
contextStr += "&expireTime=" + endTime;
contextStr += "&random=" + random;
//任務流 視頻轉流
contextStr += "&procedure=" + "LongVideoPreset";
contextStr += "&taskPriority=" + 10;
contextStr += "&taskNotifyMode=" + "Finish";
try {
Mac mac = Mac.getInstance(HMAC_ALGORITHM);
SecretKeySpec secretKey = new SecretKeySpec(this.secretKey.getBytes(CONTENT_CHARSET), mac.getAlgorithm());
mac.init(secretKey);
byte[] hash = mac.doFinal(contextStr.getBytes(CONTENT_CHARSET));
byte[] sigBuf = byteMerger(hash, contextStr.getBytes("utf8"));
strSign = new String(new BASE64Encoder().encode(sigBuf).getBytes());
strSign = strSign.replace(" ", "").replace("\n", "").replace("\r", "");
} catch (Exception e) {
throw e;
}
return strSign;
}
public void setSecretId(String secretId) {
this.secretId = secretId;
}
public void setSecretKey(String secretKey) {
this.secretKey = secretKey;
}
public void setCurrentTime(long currentTime) {
this.currentTime = currentTime;
}
public void setRandom(int random) {
this.random = random;
}
public void setSignValidDuration(int signValidDuration) {
this.signValidDuration = signValidDuration;
}
}
contextStr += "&procedure=" + "LongVideoPreset"; 對應任務流名稱
進入正題獲取播放地址
使用騰訊雲視立方 Web 超級播放器（TCPlayer）
https://cloud.tencent.com/document/product/266/58804
引入js
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/tcplayer.min.css" rel="stylesheet">
<!--如果需要在 Chrome 和 Firefox 等現代瀏覽器中通過 H5 播放 HLS 格式的視頻，需要在 tcplayer.v4.2.min.js 之前引入 hls.min.0.13.2m.js。-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/libs/hls.min.0.13.2m.js"></script>
<!--播放器腳本文件-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/tcplayer.v4.2.1.min.js"></script>
設置播放器容器
<video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline>
</video>
初始化代碼
var player = TCPlayer('player-container-id', { // player-container-id 為播放器容器 ID，必須與 html 中一致
fileID: '5285890799710670616', // 請傳入需要播放的視頻 fileID（必須）
appID: '' // 請傳入點播賬號的 appID（必須）
});
功能
GetRequest()方法的作用是:采用的是get方法跳轉到新的html頁面,地址欄上有該視頻的id,該方法就是獲取到地址欄的id,然后再 傳到TCPlayer()方法里面
具體可見 https://www.cnblogs.com/rzkwz/p/15384713.html
appID = '${appID}';
function GetRequest() {
var url = location.search; //獲取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
}
}
return theRequest;
}
//調用
var Request = new Object();
Request = GetRequest();
var fileID;
fileID = Request['resPid'];
var player = TCPlayer('player-container-id', { // player-container-id 為播放器容器ID，必須與html中一致
fileID: fileID, // 請傳入需要播放的視頻filID 必須
appID: appID, // 請傳入點播賬號的appID 必須
playbackRates: [0.5, 1, 1.25, 1.5, 2],
//其他參數請在開發文檔中查看
plugins: {
VttThumbnail: {
// 'imgUrl': '//imgcache.qq.com/open/qcloud/video/tcplayer/examples/vod/7447398155146701990.jpg', // 傳入預覽圖地址 非必須
'vttUrl': '' // 傳入vtt文件地址
},
ContinuePlay: {
// auto: true, //[可選] 是否在視頻播放后自動續播
// text: '上次播放至 ', //[可選] 提示文案
// btnText: '恢復播放' //[可選] 按鈕文案
},
ProgressMarker: true,
ContextMenu: {
statistic: true,
levelSwitch: {
open: true, // 打開切換提示
// switchingText: '開始', // 開始切換時文案
// switchedText: '成功', // 切換成功時文案
// switchErrorText: '失敗', // 切換失敗時文案
}
}
}
});
</script>
下載
流程: 前端傳參資源id請求后端接口 ---> 后端使用騰訊雲SDK去獲取視頻地址然后返回前端 --->前端獲取地址創建a標簽下載該視頻
getVideoInfo.class
/**
*
* Title: 獲取視頻播放地址
* Description: 獲取視頻播放地址
* @param resPid 用戶號碼
* @return
*/
@ResponseBody
@RequestMapping("/getVideoInfo")
public String getVideoInfo(String resPid){
logger.info("獲取視頻播放地址resPid:"+resPid);
String videoJSON="";
String mediaInfo = "";
JSONArray jsonArray = null;
try {
videoJSON = VodClient.getDescribeMediaInfos(accessKeyId, accessKeySecret, resPid);
JSONObject jsonObject = JSONObject.parseObject(videoJSON);
JSONArray jsonObjectJSONArray = jsonObject.getJSONArray("MediaInfoSet");
JSONObject basicInfo = jsonObjectJSONArray.getJSONObject(0).getJSONObject("BasicInfo");
return basicInfo.toString();
} catch (Exception e) {
logger.info("獲取視頻播放地址--異常："+e);
e.printStackTrace();
}
logger.info("獲取視頻播放地址 --/getVideoInfo--end");
return videoJSON;
}
獲取視頻播放信息
該接口可在騰訊雲API3.0調試獲取
/**
* 獲取視頻播放信息
* @param secret_id
* @param secret_key
* @param videoId
* @return
*/
public static String getDescribeMediaInfos(String secret_id, String secret_key, String videoId) {
VodClient.secret_id = secret_id;
VodClient.secret_key = secret_key;
try {
// 實例化一個認證對象，入參需要傳入騰訊雲賬戶secretId，secretKey,此處還需注意密鑰對的保密
// 密鑰可前往https://console.cloud.tencent.com/cam/capi網站進行獲取
Credential cred = new Credential(secret_id, secret_key);
// 實例化一個http選項，可選的，沒有特殊需求可以跳過
HttpProfile httpProfile = new HttpProfile();
httpProfile.setEndpoint("vod.tencentcloudapi.com");
// 實例化一個client選項，可選的，沒有特殊需求可以跳過
ClientProfile clientProfile = new ClientProfile();
clientProfile.setHttpProfile(httpProfile);
// 實例化要請求產品的client對象,clientProfile是可選的
VodClient client = new VodClient(cred, "", clientProfile);
// 實例化一個請求對象,每個接口都會對應一個request對象
DescribeMediaInfosRequest req = new DescribeMediaInfosRequest();
String[] fileIds1 = {videoId};
req.setFileIds(fileIds1);
// 返回的resp是一個DescribeMediaInfosResponse的實例，與請求對象對應
DescribeMediaInfosResponse resp = client.DescribeMediaInfos(req);
// 輸出json格式的字符串回包
System.out.println(DescribeMediaInfosResponse.toJsonString(resp));
return DescribeMediaInfosResponse.toJsonString(resp);
} catch (TencentCloudSDKException e) {
System.out.println(e.toString());
}
return null;
}
前端js代碼
downloadVideo:function(resPid){
$.ajax({
url : 'getVideoInfo',
data : {
resPid :resPid
},
dataType: "json",
success:function(data) {
//下載視頻
fetch(data.MediaUrl).then(res => res.blob()).then(blob => {
const a = document.createElement('a');
document.body.appendChild(a)
a.style.display = 'none'
const url = window.URL.createObjectURL(blob);
a.href = url;
a.download =data.Name;
a.click();
document.body.removeChild(a)
window.URL.revokeObjectURL(url);
});
}
});
},
查看下載接結果
可看到瀏覽器就下載下來
