uniapp框架播放cc视频的详细方法！

作者：尚睿德创发布时间：2019-08-08 点击数：

uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可编译到iOS、Android、H5、以及各种小程序（微信/阿里/百度/头条/QQ）等多个平台。

最近公司开发一个项目时用到了这个框架，初次接触，难免遇到不少坑，不过这个框架还是很不错的！建议大家可以用一用。废话不多说，切入正题，如何用uniapp开发能正常播放的CC视频，因为最近项目中有这个需求功能，开始在网上找了半天资料，发觉都不好用无法达到正常播放的需求。后来咨询了CC客服，他们回复说没有支持VUE框架的接口，后来了解到有个MobileAPI的接口，没办法项目总要做，该解决的问题终归得解决！后来仔细看了开发文档，几经周折终于调试通了！下面就简单说说遇到的一些难点吧！

首先，需要获取到他们的MobileAPI的接口文档，文档描述的很简单，请求参数也很简单，难就难在：需要和API系统进⾏行行 HTTP 通信时，需要将原始的 Query String 转换为和请求时刻相关的 Hashed Query String 后再通过 GET ⽅方法请求 Spark API。当时就是卡在这一步上浪费了小半天时间。

uniapp框架播放cc视频的详细方法！(图1)

uniapp框架播放cc视频的详细方法！(图2)

uniapp框架播放cc视频的详细方法！(图3)

附上官方Mobile API接口文档：链接: https://pan.baidu.com/s/1su67eIBqQhz3nluQubZXzw 提取码: n572

这里的userid和videoid都可以动态传递，也可以写死。

uniapp框架播放cc视频的详细方法！(图4)

请求数据的方法，需要用到一系列md5函数：

uniapp框架播放cc视频的详细方法！(图5)

最后附上全部代码：

<template>
	<view>
		<view class="uni-padding-wrap">
			<view class="uni-flex uni-row" style="justify-content: center; margin:30upx 0;">
				<video id="myVideo" :src="videourl"></video>
			</view>
		</view>
	</view>
</template>
<script>
var _self;
var hexcase = 0,
	chrsz = 8;

function hex_md5(s) {
	return binl2hex(core_md5(str2binl(s), s.length * chrsz));
}

function core_md5(x, len) {
	x[len >> 5] |= 0x80 << ((len) % 32);
	x[(((len + 64) >>> 9) << 4) + 14] = len;
	var a = 1732584193,
		b = -271733879,
		c = -1732584194,
		d = 271733878;
	for (var i = 0; i < x.length; i += 16) {
		var olda = a,
			oldb = b,
			oldc = c,
			oldd = d;
		a = md5_ff(a, b, c, d, x[i + 0], 7, -680876936);
		d = md5_ff(d, a, b, c, x[i + 1], 12, -389564586);
		c = md5_ff(c, d, a, b, x[i + 2], 17, 606105819);
		b = md5_ff(b, c, d, a, x[i + 3], 22, -1044525330);
		a = md5_ff(a, b, c, d, x[i + 4], 7, -176418897);
		d = md5_ff(d, a, b, c, x[i + 5], 12, 1200080426);
		c = md5_ff(c, d, a, b, x[i + 6], 17, -1473231341);
		b = md5_ff(b, c, d, a, x[i + 7], 22, -45705983);
		a = md5_ff(a, b, c, d, x[i + 8], 7, 1770035416);
		d = md5_ff(d, a, b, c, x[i + 9], 12, -1958414417);
		c = md5_ff(c, d, a, b, x[i + 10], 17, -42063);
		b = md5_ff(b, c, d, a, x[i + 11], 22, -1990404162);
		a = md5_ff(a, b, c, d, x[i + 12], 7, 1804603682);
		d = md5_ff(d, a, b, c, x[i + 13], 12, -40341101);
		c = md5_ff(c, d, a, b, x[i + 14], 17, -1502002290);
		b = md5_ff(b, c, d, a, x[i + 15], 22, 1236535329);
		a = md5_gg(a, b, c, d, x[i + 1], 5, -165796510);
		d = md5_gg(d, a, b, c, x[i + 6], 9, -1069501632);
		c = md5_gg(c, d, a, b, x[i + 11], 14, 643717713);
		b = md5_gg(b, c, d, a, x[i + 0], 20, -373897302);
		a = md5_gg(a, b, c, d, x[i + 5], 5, -701558691);
		d = md5_gg(d, a, b, c, x[i + 10], 9, 38016083);
		c = md5_gg(c, d, a, b, x[i + 15], 14, -660478335);
		b = md5_gg(b, c, d, a, x[i + 4], 20, -405537848);
		a = md5_gg(a, b, c, d, x[i + 9], 5, 568446438);
		d = md5_gg(d, a, b, c, x[i + 14], 9, -1019803690);
		c = md5_gg(c, d, a, b, x[i + 3], 14, -187363961);
		b = md5_gg(b, c, d, a, x[i + 8], 20, 1163531501);
		a = md5_gg(a, b, c, d, x[i + 13], 5, -1444681467);
		d = md5_gg(d, a, b, c, x[i + 2], 9, -51403784);
		c = md5_gg(c, d, a, b, x[i + 7], 14, 1735328473);
		b = md5_gg(b, c, d, a, x[i + 12], 20, -1926607734);
		a = md5_hh(a, b, c, d, x[i + 5], 4, -378558);
		d = md5_hh(d, a, b, c, x[i + 8], 11, -2022574463);
		c = md5_hh(c, d, a, b, x[i + 11], 16, 1839030562);
		b = md5_hh(b, c, d, a, x[i + 14], 23, -35309556);
		a = md5_hh(a, b, c, d, x[i + 1], 4, -1530992060);
		d = md5_hh(d, a, b, c, x[i + 4], 11, 1272893353);
		c = md5_hh(c, d, a, b, x[i + 7], 16, -155497632);
		b = md5_hh(b, c, d, a, x[i + 10], 23, -1094730640);
		a = md5_hh(a, b, c, d, x[i + 13], 4, 681279174);
		d = md5_hh(d, a, b, c, x[i + 0], 11, -358537222);
		c = md5_hh(c, d, a, b, x[i + 3], 16, -722521979);
		b = md5_hh(b, c, d, a, x[i + 6], 23, 76029189);
		a = md5_hh(a, b, c, d, x[i + 9], 4, -640364487);
		d = md5_hh(d, a, b, c, x[i + 12], 11, -421815835);
		c = md5_hh(c, d, a, b, x[i + 15], 16, 530742520);
		b = md5_hh(b, c, d, a, x[i + 2], 23, -995338651);
		a = md5_ii(a, b, c, d, x[i + 0], 6, -198630844);
		d = md5_ii(d, a, b, c, x[i + 7], 10, 1126891415);
		c = md5_ii(c, d, a, b, x[i + 14], 15, -1416354905);
		b = md5_ii(b, c, d, a, x[i + 5], 21, -57434055);
		a = md5_ii(a, b, c, d, x[i + 12], 6, 1700485571);
		d = md5_ii(d, a, b, c, x[i + 3], 10, -1894986606);
		c = md5_ii(c, d, a, b, x[i + 10], 15, -1051523);
		b = md5_ii(b, c, d, a, x[i + 1], 21, -2054922799);
		a = md5_ii(a, b, c, d, x[i + 8], 6, 1873313359);
		d = md5_ii(d, a, b, c, x[i + 15], 10, -30611744);
		c = md5_ii(c, d, a, b, x[i + 6], 15, -1560198380);
		b = md5_ii(b, c, d, a, x[i + 13], 21, 1309151649);
		a = md5_ii(a, b, c, d, x[i + 4], 6, -145523070);
		d = md5_ii(d, a, b, c, x[i + 11], 10, -1120210379);
		c = md5_ii(c, d, a, b, x[i + 2], 15, 718787259);
		b = md5_ii(b, c, d, a, x[i + 9], 21, -343485551);
		a = safe_add(a, olda);
		b = safe_add(b, oldb);
		c = safe_add(c, oldc);
		d = safe_add(d, oldd);
	}
	return Array(a, b, c, d);
}

function md5_cmn(q, a, b, x, s, t) {
	return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s), b);
}

function md5_ff(a, b, c, d, x, s, t) {
	return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
}

function md5_gg(a, b, c, d, x, s, t) {
	return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
}

function md5_hh(a, b, c, d, x, s, t) {
	return md5_cmn(b ^ c ^ d, a, b, x, s, t);
}

function md5_ii(a, b, c, d, x, s, t) {
	return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
}

function safe_add(x, y) {
	var lsw = (x & 0xFFFF) + (y & 0xFFFF),
		msw = (x >> 16) + (y >> 16) + (lsw >> 16);
	return (msw << 16) | (lsw & 0xFFFF);
}

function bit_rol(num, cnt) {
	return (num << cnt) | (num >>> (32 - cnt));
}

function str2binl(str) {
	var bin = Array(),
		mask = (1 << chrsz) - 1;
	for (var i = 0; i < str.length * chrsz; i += chrsz)
		bin[i >> 5] |= (str.charCodeAt(i / chrsz) & mask) << (i % 32);
	return bin;
}

function binl2hex(binarray) {
	var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef",
		str = "";
	for (var i = 0; i < binarray.length * 4; i++) {
		str += hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8 + 4)) & 0xF) +
			hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8)) & 0xF);
	}
	return str;
}

export default {
	data() {
		return {
			videourl:'',//video标签中的src地址
			vid:'填你的userid',//userid 
			videoid:'填你的videoid',//视频ID  videoid
			suc:''
		}
	},
	onReady: function(res) {
		// #ifndef MP-ALIPAY
		this.videoContext = uni.createVideoContext('myVideo')
		// #endif
	},
	onLoad(){
		let _this = this;
		_this.getVideoUrl();
	},
	methods: {
		getVideoUrl:function(vid, videoid, suc) {
			let _this = this;
			let time = new Date().getTime();
			var str = `format=json&hlsflag=0&userid=填你的userid&videoid=`+this.videoid+`&time=`+time+`&salt=填你的apikey`,
				hash = hex_md5(str);
			uni.request({
				url:`http://union.bokecc.com/api/mobile?format=json&hlsflag=0&userid=填你的userid&videoid=`+this.videoid+`&time=`+time+`&hash=`+hash+``,
				method: 'GET',
				data: {
					// userid:this.vid,
					// videoid:this.videoid,
					// hlsflag:'0',
					// format:'json'
				},
				success: (res) => {
					_this.videourl = res.data.video.copy[0].playurl;
					console.log(res);
				},
				fail: (msg) => {
					uni.showToast({
						title: '无法获取视频',
						duration: 1000
					});
				},
				complete: () => {
					//uni.hideLoading();
				}
			})
		}
	}
}
</script>
<style>
</style>