验证中...
Languages: JavaScript
Categories: jQuery 插件
Latest update 2019-03-22 15:06
html
Raw Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="//i.bevaparents.com/taoqikid-cms/wap/css/swiper.min.css">
<link rel="stylesheet" href="//i.bevaparents.com/taoqikid-cms/wap/css/main.css">
<script src="//i.bevaparents.com/taoqikid-cms/wap/js/xdomain.min.js" slave="http://taoqikid-cms.shenliangzhu.bevateachers.com/proxy.html"></script>
<title></title>
</head>
<body>
<div class="play-video-wrap">
<audio src="http://flysheep.xyz/mp3/pre/PreLesson07.mp3" id="audio" autoplay onplay="isonplay()" onpause="isonpause()"
onended="audioEnded()" ontimeupdate="audioPlaying()" oncanplay="canplayaudio()"></audio>
<header>
<div class="cover">
<img class="cover-img" src="" alt="">
</div>
<p class="title"></p>
<p class="subtitle"></p>
<div class="progress">
<p class="current-time">00:00</p>
<div class="progress-bar">
<p class="bg"></p>
<p class="dot"></p>
</div>
<p class="duration" id="duration">00:00</p>
</div>
<div class="controls">
<p>
<img src="//i.bevaparents.com/taoqikid-cms/wap/imgs/prev.png" onclick="prev()" alt="">
</p>
<p>
<img src="//i.bevaparents.com/taoqikid-cms/wap/imgs/pause.png" class="pause" onclick="pause()" style="display: none">
<img src="//i.bevaparents.com/taoqikid-cms/wap/imgs/play.png" class="play" onclick="play()" alt="">
</p>
<p>
<img src="//i.bevaparents.com/taoqikid-cms/wap/imgs/next.png" onclick="next()" alt="">
</p>
</div>
</header>
<div class="video-tab">
<div class="main-tabs" id="my-affix1"></div>
<div class="main-tabs" id="my-affix">
<a href="javascript:void(0)" class="active">简介</a>
<a href="javascript:void(0)">课程列表</a>
</div>
<div class="description">
</div>
<ul class="lesson-list">
</ul>
</div>
</div>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="//i.bevaparents.com/taoqikid-cms/wap/js/jquery-1.11.2.min.js"></script>
<script src='//i.bevaparents.com/taoqikid-cms/wap/js/hotcss.js'></script>
<script>
let current = 0
let currentTime = 0
let timer = null
let list = []
let li
let course_data
// -----------------------------------------------------------------------------------------------
let l_width = 0 //元素距离左侧位置
let the_width = 0 //当前元素宽度
let x_position = 0 //点击当前x轴位置
let the_time = null
// 滑块控制播放进度
$(".progress-bar").click(function(e) {
l_width = $(this).offset().left;
x_position = e.pageX
the_width = $(this).outerWidth()
let bg_width = ((x_position - l_width) / the_width * 100)
$('.bg').eq(0).css({
width: bg_width + "%"
})
$('.dot').eq(0).css({
left: $('.bg').eq(0).width() - 7
})
// 获取当前mp3时长
the_time = document.getElementById("audio").duration
// 计算当前需要开始的时间
console.log(bg_width);
let starttime = parseInt(the_time * bg_width / 100)
console.log(starttime);
$(".duration").text(formmat(the_time))
document.getElementById("audio").currentTime = starttime;
document.getElementById("audio").play();
console.log(document.getElementById("audio").duration);
})
// 兼容ios页面进入 mp3 自动播放
document.addEventListener("WeixinJSBridgeReady", function() {
document.getElementById('audio').play();
// document.getElementById('video').play();
}, false);
// -----------------------------------------------------------------------------------------------
function audioPlaying() {
let currentTime = $('#audio').get(0).currentTime
let duration = $('#audio').get(0).duration
let percent = (currentTime / duration * 100) + '%'
$('.bg').eq(0).css({
width: percent
})
$('.dot').eq(0).css({
left: $('.bg').eq(0).width() - 7
})
timer = setInterval(() => {
currentTime++
}, 1000)
$('.current-time').eq(0).text(formmat(currentTime))
}
function canplayaudio() {
}
function audioEnded() {
$('.play').show()
$('.pause').hide()
clearInterval(timer)
$('.bg').eq(0).css({
width: 0
})
$('.dot').eq(0).css({
left: 0
})
$('.current-time').eq(0).text('00:00')
console.log("12312312313213212312313");
next() //调用下一曲播放
}
function isonplay() {
$('.pause').show()
$('.play').hide()
}
function isonpause() {
$('.play').show()
$('.pause').hide()
clearInterval(timer)
}
function play() {
$('#audio').get(0).play()
$('.pause').show()
$('.play').hide()
$("#audio").get(0).duration
// 获取到当前播放曲目时间长度
console.log($("#audio").get(0).duration)
// console.log(theAudioTime)
}
function pause() {
console.log('play')
$('#audio').get(0).pause()
$('.play').show()
$('.pause').hide()
clearInterval(timer)
}
function next() {
console.log("开始了新的一首")
if (current === list.length - 1) {
return false
} else {
li.eq(current).css({
color: "#333"
})
li.eq(current + 1).css({
color: "#ff6767"
})
current++
$('.subtitle').eq(0).text(list[current].node_object_data.title)
$('#audio').attr('src', list[current].node_object_data.res_identifier);
$('.cover-img').eq(0).attr('src', course_data.node_relation_children[current].node_object_data.picture_hori)
}
}
function prev() {
if (current === 0) {
return false
} else {
li.eq(current - 1).css({
color: "#ff6767"
})
li.eq(current).css({
color: "#333"
})
current--
$('.subtitle').eq(0).text(list[current].node_object_data.title)
$('#audio').attr('src', list[current].node_object_data.res_identifier);
$('.cover-img').eq(0).attr('src', course_data.node_relation_children[current].node_object_data.picture_hori)
}
}
function formmat(time) {
let second = time % 60 < 10 ? '0' + parseInt(time % 60) : parseInt(time % 60);
let min = parseInt((time / 60) % 60) < 10 ? '0' + parseInt((time / 60) % 60) : parseInt((
time / 60) % 60);
return [min, second].join(':')
}
$(function() {
let href = window.location.href
let detail_html = ''
let lesson_html = ''
let nonce_str = Math.random().toString(36).substr(2),
hash = '83c2cc517352a32e6364af3f1f6f6279'
let id = getQueryString(href, 'courseId')
const sign = hexMD5(`courseId=${id}&courseType=CmsAudioAlbum&nonce_str=${nonce_str}${hash}`).toLowerCase()
let activeTab = 0
window.addEventListener('scroll', listenScroll)
let a_length = $('#my-affix a').length;
for (let i = 0; i < a_length; i++) {
$('#my-affix a').eq(i).click(() => {
clearActive()
$('#my-affix a').eq(i).addClass('active')
if (i === 0) {
$('.description').eq(0).show()
$('.lesson-list').eq(0).hide()
}
if (i === 1) {
$('.lesson-list').eq(0).show()
$('.description').eq(0).hide()
}
})
}
function getQueryString(url, key) {
let str = url.replace("?", "&");
let reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)", "i");
let r = str.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
// let id = 9
$.ajax({
url: ``,
success: res => {
console.log(JSON.parse(res))
course_data = JSON.parse(res).data
list = course_data.node_relation_children
course_data.node_object_data.extend_extra.detail_images.forEach(item => {
detail_html += `<p><img src="${item}" /></p>`
})
$('.description').eq(0).html(detail_html)
course_data.node_relation_children.forEach(item => {
lesson_html += `<li title="${item.node_object_data.res_identifier}">${item.node_object_data.title}</li>`
})
$('.play-video-wrap .title').eq(0).text(course_data.node_object_data.title)
document.title = course_data.node_object_data.title
$('.lesson-list').eq(0).html(lesson_html)
$('.cover-img').eq(0).attr('src', course_data.node_relation_children[0].node_object_data.picture_hori)
$('.subtitle').eq(0).text(course_data.node_relation_children[0].node_object_data.title)
$('.lesson-list li').eq(0).css({
color: '#ff6767'
})
$('#audio').attr('src', course_data.node_relation_children[0].node_object_data.res_identifier);
$('#audio').on('durationchange', function() {
console.log($('#audio').get(0).duration)
$('.duration').eq(0).text(formmat($('#audio').get(0).duration))
clearInterval(timer)
})
li = $('.lesson-list li')
for (let i = 0; i < li.length; i++) {
li.eq(i).click(() => {
$('#audio').attr('src', course_data.node_relation_children[i].node_object_data.res_identifier)
$('.subtitle').eq(0).text(course_data.node_relation_children[i].node_object_data.title)
$('.cover-img').eq(0).attr('src', course_data.node_relation_children[i].node_object_data.picture_hori)
li.eq(current).css({
color: "#333"
})
li.eq(i).css({
color: "#ff6767"
})
current = i
$('.pause').show()
$('.play').hide()
})
}
}
})
function getScrollTop() {
let scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
}
$('#my-affix1').hide()
function listenScroll() {
let offsetTop = document.querySelector('#my-affix').offsetTop;
let offsetTop1 = document.querySelector('#my-affix1').offsetTop;
if (offsetTop1 > 0) {
offsetTop = offsetTop1
}
const scrollTop = getScrollTop();
let isFixed = (scrollTop > offsetTop) ? true : false
if (isFixed) {
$('#my-affix').addClass('tabs-fixed')
$('#my-affix1').show()
} else {
$('#my-affix').removeClass('tabs-fixed')
$('#my-affix1').hide()
}
}
function clearActive() {
let a = $('#my-affix a');
for (let i = 0; i < a.length; i++) {
a.eq(i).removeClass('active')
}
}
//MD5
function safe_add(x, y) {
var lsw = (x & 0xFFFF) + (y & 0xFFFF)
var msw = (x >> 16) + (y >> 16) + (lsw >> 16)
return (msw << 16) | (lsw & 0xFFFF)
}
/*
* Bitwise rotate a 32-bit number to the left.
*/
function rol(num, cnt) {
return (num << cnt) | (num >>> (32 - cnt))
}
/*
* These functions implement the four basic operations the algorithm uses.
*/
function cmn(q, a, b, x, s, t) {
return safe_add(rol(safe_add(safe_add(a, q), safe_add(x, t)), s), b)
}
function ff(a, b, c, d, x, s, t) {
return cmn((b & c) | ((~b) & d), a, b, x, s, t)
}
function gg(a, b, c, d, x, s, t) {
return cmn((b & d) | (c & (~d)), a, b, x, s, t)
}
function hh(a, b, c, d, x, s, t) {
return cmn(b ^ c ^ d, a, b, x, s, t)
}
function ii(a, b, c, d, x, s, t) {
return cmn(c ^ (b | (~d)), a, b, x, s, t)
}
function str2binl(str) {
var nblk = ((str.length + 8) >> 6) + 1 // number of 16-word blocks
var blks = new Array(nblk * 16)
for (var i = 0; i < nblk * 16; i++) blks[i] = 0
for (var i = 0; i < str.length; i++)
blks[i >> 2] |= (str.charCodeAt(i) & 0xFF) << ((i % 4) * 8)
blks[i >> 2] |= 0x80 << ((i % 4) * 8)
blks[nblk * 16 - 2] = str.length * 8
return blks
}
function coreMD5(x) {
var a = 1732584193
var b = -271733879
var c = -1732584194
var d = 271733878
for (var i = 0; i < x.length; i += 16) {
var olda = a
var oldb = b
var oldc = c
var oldd = d
a = ff(a, b, c, d, x[i + 0], 7, -680876936)
d = ff(d, a, b, c, x[i + 1], 12, -389564586)
c = ff(c, d, a, b, x[i + 2], 17, 606105819)
b = ff(b, c, d, a, x[i + 3], 22, -1044525330)
a = ff(a, b, c, d, x[i + 4], 7, -176418897)
d = ff(d, a, b, c, x[i + 5], 12, 1200080426)
c = ff(c, d, a, b, x[i + 6], 17, -1473231341)
b = ff(b, c, d, a, x[i + 7], 22, -45705983)
a = ff(a, b, c, d, x[i + 8], 7, 1770035416)
d = ff(d, a, b, c, x[i + 9], 12, -1958414417)
c = ff(c, d, a, b, x[i + 10], 17, -42063)
b = ff(b, c, d, a, x[i + 11], 22, -1990404162)
a = ff(a, b, c, d, x[i + 12], 7, 1804603682)
d = ff(d, a, b, c, x[i + 13], 12, -40341101)
c = ff(c, d, a, b, x[i + 14], 17, -1502002290)
b = ff(b, c, d, a, x[i + 15], 22, 1236535329)
a = gg(a, b, c, d, x[i + 1], 5, -165796510)
d = gg(d, a, b, c, x[i + 6], 9, -1069501632)
c = gg(c, d, a, b, x[i + 11], 14, 643717713)
b = gg(b, c, d, a, x[i + 0], 20, -373897302)
a = gg(a, b, c, d, x[i + 5], 5, -701558691)
d = gg(d, a, b, c, x[i + 10], 9, 38016083)
c = gg(c, d, a, b, x[i + 15], 14, -660478335)
b = gg(b, c, d, a, x[i + 4], 20, -405537848)
a = gg(a, b, c, d, x[i + 9], 5, 568446438)
d = gg(d, a, b, c, x[i + 14], 9, -1019803690)
c = gg(c, d, a, b, x[i + 3], 14, -187363961)
b = gg(b, c, d, a, x[i + 8], 20, 1163531501)
a = gg(a, b, c, d, x[i + 13], 5, -1444681467)
d = gg(d, a, b, c, x[i + 2], 9, -51403784)
c = gg(c, d, a, b, x[i + 7], 14, 1735328473)
b = gg(b, c, d, a, x[i + 12], 20, -1926607734)
a = hh(a, b, c, d, x[i + 5], 4, -378558)
d = hh(d, a, b, c, x[i + 8], 11, -2022574463)
c = hh(c, d, a, b, x[i + 11], 16, 1839030562)
b = hh(b, c, d, a, x[i + 14], 23, -35309556)
a = hh(a, b, c, d, x[i + 1], 4, -1530992060)
d = hh(d, a, b, c, x[i + 4], 11, 1272893353)
c = hh(c, d, a, b, x[i + 7], 16, -155497632)
b = hh(b, c, d, a, x[i + 10], 23, -1094730640)
a = hh(a, b, c, d, x[i + 13], 4, 681279174)
d = hh(d, a, b, c, x[i + 0], 11, -358537222)
c = hh(c, d, a, b, x[i + 3], 16, -722521979)
b = hh(b, c, d, a, x[i + 6], 23, 76029189)
a = hh(a, b, c, d, x[i + 9], 4, -640364487)
d = hh(d, a, b, c, x[i + 12], 11, -421815835)
c = hh(c, d, a, b, x[i + 15], 16, 530742520)
b = hh(b, c, d, a, x[i + 2], 23, -995338651)
a = ii(a, b, c, d, x[i + 0], 6, -198630844)
d = ii(d, a, b, c, x[i + 7], 10, 1126891415)
c = ii(c, d, a, b, x[i + 14], 15, -1416354905)
b = ii(b, c, d, a, x[i + 5], 21, -57434055)
a = ii(a, b, c, d, x[i + 12], 6, 1700485571)
d = ii(d, a, b, c, x[i + 3], 10, -1894986606)
c = ii(c, d, a, b, x[i + 10], 15, -1051523)
b = ii(b, c, d, a, x[i + 1], 21, -2054922799)
a = ii(a, b, c, d, x[i + 8], 6, 1873313359)
d = ii(d, a, b, c, x[i + 15], 10, -30611744)
c = ii(c, d, a, b, x[i + 6], 15, -1560198380)
b = ii(b, c, d, a, x[i + 13], 21, 1309151649)
a = ii(a, b, c, d, x[i + 4], 6, -145523070)
d = ii(d, a, b, c, x[i + 11], 10, -1120210379)
c = ii(c, d, a, b, x[i + 2], 15, 718787259)
b = 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 [a, b, c, d]
}
function binl2hex(binarray) {
var hex_tab = "0123456789abcdef"
var 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
}
function hexMD5(str) {
return binl2hex(coreMD5(str2binl(str)))
}
})
</script>
</body>
</html>

Comment list( 1 )

You need to Sign in for post a comment

Help Search

183227_9af5e6a8_1826025 111910_4d91f001_1826025