Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
L
learn-online
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
EzijingWeb
learn-online
Commits
676769a8
提交
676769a8
authored
5月 19, 2020
作者:
王鹏飞
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix:修复视频播放问题
上级
5f5f129e
显示空白字符变更
内嵌
并排
正在显示
5 个修改的文件
包含
275 行增加
和
120 行删除
+275
-120
app.json
learnOnline/app.json
+0
-1
contentAudio.wxml
learnOnline/pages/videoPlayer/contentAudio/contentAudio.wxml
+1
-3
contentVideo.wxml
learnOnline/pages/videoPlayer/contentVideo/contentVideo.wxml
+2
-3
show.js
learnOnline/pages/videoPlayer/show.js
+266
-109
show.wxml
learnOnline/pages/videoPlayer/show.wxml
+6
-4
没有找到文件。
learnOnline/app.json
浏览文件 @
676769a8
...
@@ -27,7 +27,6 @@
...
@@ -27,7 +27,6 @@
"color"
:
"#313131"
,
"color"
:
"#313131"
,
"backgroundColor"
:
"#ffffff"
,
"backgroundColor"
:
"#ffffff"
,
"selectedColor"
:
"#b49441"
,
"selectedColor"
:
"#b49441"
,
"aniamtion"
:
"true"
,
"list"
:
[
"list"
:
[
{
{
"pagePath"
:
"pages/learnSystem/home/home"
,
"pagePath"
:
"pages/learnSystem/home/home"
,
...
...
learnOnline/pages/videoPlayer/contentAudio/contentAudio.wxml
浏览文件 @
676769a8
<template name='contentAudio'>
<template name='contentAudio'>
<view class='content-audio'
<view class='content-audio' wx:if="{{status.isAudio}}">
style='{{status.isSet && status.isAudio ? "display: none;" : "" }} {{status.isImages && status.isAudio ? "display: none;" : "" }} {{status.isVideo ? "display: none;" : "" }}'
>
<image src='./contentAudio/icons/loading_small.gif' class='loading-image {{status.imagesLoaded && "none"}}' mode='aspectFit'/>
<image src='./contentAudio/icons/loading_small.gif' class='loading-image {{status.imagesLoaded && "none"}}' mode='aspectFit'/>
<image wx:if='{{image.imgUrls[image.current]}}' src='{{image.imgUrls[image.current]}}' class='slide-image' mode='aspectFill' bindload='imagesLoaded'/>
<image wx:if='{{image.imgUrls[image.current]}}' src='{{image.imgUrls[image.current]}}' class='slide-image' mode='aspectFill' bindload='imagesLoaded'/>
<view wx:if='{{!image.imgUrls[image.current]}}' class='slide-image'>本课程暂无PPT</view>
<view wx:if='{{!image.imgUrls[image.current]}}' class='slide-image'>本课程暂无PPT</view>
...
...
learnOnline/pages/videoPlayer/contentVideo/contentVideo.wxml
浏览文件 @
676769a8
<template name='contentVideo'>
<template name='contentVideo'>
<!-- 这里加 这么多判断原因,video组件在真机上测试,一定在最上层,其他任何元素都挡不住,只能先隐藏,需要时再显示 -->
<!-- 这里加 这么多判断原因,video组件在真机上测试,一定在最上层,其他任何元素都挡不住,只能先隐藏,需要时再显示 -->
<view class='content-video'
<view class='content-video' wx:if="{{status.isVideo}}">
style='{{status.isSet && status.isVideo ? "display: none;" : "" }} {{status.isImages && status.isVideo ? "display: none;" : "" }} {{status.isAudio ? "display: none;" : "" }} {{chapterList.isShow && status.isVideo ? "display: none;" : "" }} {{ status.isLoading ? "display: none": "" }}'
>
<video id='my-video' class='my-video' src='{{video.src}}' show-center-play-btn='{{false}}' controls='{{false}}' bindtimeupdate='timeUpdate' bindfullscreenchange='beginAndOutFullScreen' bindpause='beginPauseVA' bindplay='beginPlayVA' binderror='playError' bindended='playEnded' autoplay='{{true}}'></video>
<video id='my-video' class='my-video' src='{{video.src}}' show-center-play-btn='{{false}}' controls='{{false}}' bindtimeupdate='timeUpdate' bindfullscreenchange='beginAndOutFullScreen' bindpause='beginPauseVA' bindplay='beginPlayVA' binderror='playError' bindended='playEnded' autoplay='{{true}}'></video>
</view>
</view>
</template>
</template>
\ No newline at end of file
learnOnline/pages/videoPlayer/show.js
浏览文件 @
676769a8
...
@@ -26,7 +26,7 @@ Page({
...
@@ -26,7 +26,7 @@ Page({
isAudio
:
false
,
// 是否播放音频
isAudio
:
false
,
// 是否播放音频
isImages
:
false
,
// 是否播放图片
isImages
:
false
,
// 是否播放图片
isVideo
:
false
,
// 是否播放视频,独立存在,永远存在,只用isVideo属性控制
isVideo
:
false
,
// 是否播放视频,独立存在,永远存在,只用isVideo属性控制
imagesLoaded
:
false
,
// 图片是否加载完
imagesLoaded
:
false
// 图片是否加载完
},
},
/* 视频地址 */
/* 视频地址 */
video
:
{
video
:
{
...
@@ -65,21 +65,28 @@ Page({
...
@@ -65,21 +65,28 @@ Page({
chapterList
:
{
chapterList
:
{
isShow
:
false
,
// 是否显示列表
isShow
:
false
,
// 是否显示列表
currentChapterId
:
'11'
,
// 当前章节id
currentChapterId
:
'11'
,
// 当前章节id
course
:
[{
course
:
[
{
title
:
'第一章:重要概念'
,
title
:
'第一章:重要概念'
,
chapters
:
[
chapters
:
[
{
id
:
'11'
,
time
:
'28:18'
,
name
:
'1.1 现值(PV)和终值(FV)'
},
{
id
:
'11'
,
time
:
'28:18'
,
name
:
'1.1 现值(PV)和终值(FV)'
},
{
id
:
'12'
,
time
:
'19:09'
,
name
:
'1.2 净现值(NPV)及实际收益率'
}
{
id
:
'12'
,
time
:
'19:09'
,
name
:
'1.2 净现值(NPV)及实际收益率'
}
]
]
},
{
},
{
title
:
'第二章:证券估值'
,
title
:
'第二章:证券估值'
,
chapters
:
[
chapters
:
[
{
id
:
'21'
,
time
:
'27:49'
,
name
:
'2.1 债券和股票的现金流贴现估值方法'
},
{
id
:
'21'
,
time
:
'27:49'
,
name
:
'2.1 债券和股票的现金流贴现估值方法'
},
{
id
:
'22'
,
time
:
'16:04'
,
name
:
'2.2 债券评级及债券协议'
},
{
id
:
'22'
,
time
:
'16:04'
,
name
:
'2.2 债券评级及债券协议'
},
{
id
:
'23'
,
time
:
''
,
name
:
'公司金融第二周测验'
},
{
id
:
'23'
,
time
:
''
,
name
:
'公司金融第二周测验'
},
{
id
:
'24'
,
time
:
''
,
name
:
'公司金融第二周作业'
}
{
id
:
'24'
,
time
:
''
,
name
:
'公司金融第二周作业'
}
]
]
}],
}
],
nextVideo
:
{},
// 下一章 音视频对象
nextVideo
:
{},
// 下一章 音视频对象
prevVideo
:
{}
// 上一章音视频对象
prevVideo
:
{}
// 上一章音视频对象
},
},
...
@@ -110,9 +117,18 @@ Page({
...
@@ -110,9 +117,18 @@ Page({
initPage
:
function
(
res
,
vid
)
{
initPage
:
function
(
res
,
vid
)
{
/* 默认先 显示视频 */
/* 默认先 显示视频 */
this
.
setData
({
'status.isVideo'
:
true
})
this
.
setData
({
'status.isVideo'
:
true
})
this
.
_cache
=
{
isPlay
:
false
,
initial_time
:
0
,
currentTime
:
'00:00'
,
totalTime
:
'00:00'
,
progress
:
'0%'
,
curRate
:
'1.0X'
,
jumpFlag
:
false
,
vid
:
vid
}
this
.
_cache
=
{
isPlay
:
false
,
initial_time
:
0
,
currentTime
:
'00:00'
,
totalTime
:
'00:00'
,
progress
:
'0%'
,
curRate
:
'1.0X'
,
jumpFlag
:
false
,
vid
:
vid
}
/* 加载中时,重置控制内容 全部为 0 */
/* 加载中时,重置控制内容 全部为 0 */
this
.
setData
({
'ctrlBar'
:
this
.
_cache
})
this
.
setData
({
ctrlBar
:
this
.
_cache
})
/* 一定会 存在值 */
/* 一定会 存在值 */
if
(
res
)
{
if
(
res
)
{
let
tempVid
=
wx
.
getStorageSync
(
'videoCacheCtrlBar'
).
vid
let
tempVid
=
wx
.
getStorageSync
(
'videoCacheCtrlBar'
).
vid
...
@@ -123,14 +139,14 @@ Page({
...
@@ -123,14 +139,14 @@ Page({
this
.
_cache
.
initial_time
=
res
.
cpt
this
.
_cache
.
initial_time
=
res
.
cpt
this
.
realTimeProgress
=
res
this
.
realTimeProgress
=
res
}
}
wx
.
setStorageSync
(
'videoCacheCtrlBar'
,
this
.
_cache
)
;
wx
.
setStorageSync
(
'videoCacheCtrlBar'
,
this
.
_cache
)
wx
.
setStorageSync
(
'audioCacheCtrlBar'
,
this
.
_cache
)
;
wx
.
setStorageSync
(
'audioCacheCtrlBar'
,
this
.
_cache
)
/* 将旧的对象全部抛弃掉 */
/* 将旧的对象全部抛弃掉 */
(
!
this
.
_video
&&
(
this
.
_video
=
objV
.
Video
(
'my-video'
)));
!
this
.
_video
&&
(
this
.
_video
=
objV
.
Video
(
'my-video'
))
this
.
_audio
=
objA
.
Audio
(
this
.
data
.
audio
.
src
,
this
)
;
this
.
_audio
=
objA
.
Audio
(
this
.
data
.
audio
.
src
,
this
)
/* setData、视频设置等 异步,需要时间,所以加个延时,为true时播放按钮不可用 */
/* setData、视频设置等 异步,需要时间,所以加个延时,为true时播放按钮不可用 */
this
.
setData
({
'initVAFlag'
:
true
})
this
.
setData
({
initVAFlag
:
true
})
this
.
setData
({
'ctrlBar.isPlay'
:
true
})
this
.
setData
({
'ctrlBar.isPlay'
:
true
})
setTimeout
(()
=>
{
setTimeout
(()
=>
{
...
@@ -138,21 +154,30 @@ Page({
...
@@ -138,21 +154,30 @@ Page({
this
.
playVA
()
this
.
playVA
()
this
.
setData
({
'status.isLoading'
:
false
})
this
.
setData
({
'status.isLoading'
:
false
})
/* 这里 设置倍速还有点问题 */
/* 这里 设置倍速还有点问题 */
let
_vObj
=
this
.
_video
;
for
(
let
i
=
0
;
i
<
_vObj
.
RATE
.
length
;
i
++
)
{
let
_
=
_vObj
.
RATE
[
i
];
if
(
this
.
data
.
ctrlBar
.
curRate
.
replace
(
/X/
,
''
)
==
_
)
{
_vObj
.
rateIndex
=
i
-
1
;
this
.
setRate
();
};
}
let
_vObj
=
this
.
_video
},
200
);
for
(
let
i
=
0
;
i
<
_vObj
.
RATE
.
length
;
i
++
)
{
let
_
=
_vObj
.
RATE
[
i
]
if
(
this
.
data
.
ctrlBar
.
curRate
.
replace
(
/X/
,
''
)
==
_
)
{
_vObj
.
rateIndex
=
i
-
1
this
.
setRate
()
}
}
},
200
)
},
},
/* 页面初始入口,会 先走 AJAX 读取 章节列表数据、音视频和PPT数据、进度数据 */
/* 页面初始入口,会 先走 AJAX 读取 章节列表数据、音视频和PPT数据、进度数据 */
ajaxInitGetInfo
:
function
(
vid
,
videoType
)
{
ajaxInitGetInfo
:
function
(
vid
,
videoType
)
{
let
cid
=
this
.
data
.
options
.
cid
,
sid
=
this
.
data
.
options
.
sid
,
did
=
'jjhz92fn0.le2a6c06c9g0.thhg7ekb1f8'
;
let
cid
=
this
.
data
.
options
.
cid
,
sid
=
this
.
data
.
options
.
sid
,
did
=
'jjhz92fn0.le2a6c06c9g0.thhg7ekb1f8'
ChapterApi
.
getChapterList
(
cid
,
sid
,
vid
,
(
json
)
=>
{
ChapterApi
.
getChapterList
(
cid
,
sid
,
vid
,
(
json
)
=>
{
this
.
setData
({
'chapterList'
:
json
})
this
.
setData
({
chapterList
:
json
})
})
})
// CC视频走这个接口
// CC视频走这个接口
ChapterApi
.
getCurrentChapterDetail
(
vid
,
videoType
,
(
json
)
=>
{
ChapterApi
.
getCurrentChapterDetail
(
vid
,
videoType
,
(
json
)
=>
{
// 播放的视频数据
// 播放的视频数据
this
.
setData
({
'video'
:
json
.
video
})
this
.
setData
({
video
:
json
.
video
})
this
.
setData
({
'audio'
:
json
.
audio
})
this
.
setData
({
audio
:
json
.
audio
})
this
.
setData
({
'image'
:
json
.
image
})
this
.
setData
({
image
:
json
.
image
})
ChapterApi
.
getProgress
(
vid
,
did
,
sid
,
(
res
)
=>
{
ChapterApi
.
getProgress
(
vid
,
did
,
sid
,
(
res
)
=>
{
res
.
did
=
did
res
.
did
=
did
res
.
vid
=
vid
res
.
vid
=
vid
...
@@ -163,79 +188,111 @@ Page({
...
@@ -163,79 +188,111 @@ Page({
})
})
},
},
onLoad
:
function
(
options
)
{
onLoad
:
function
(
options
)
{
if
(
!
options
.
vid
)
{
if
(
!
options
.
vid
)
{
wx
.
showToast
({
wx
.
showToast
({
title
:
'获取视频失败'
,
title
:
'获取视频失败'
,
icon
:
'loading'
,
icon
:
'loading'
,
duration
:
3000
,
duration
:
3000
,
success
:
function
()
{
success
:
function
()
{
setTimeout
(
function
()
{
setTimeout
(
function
()
{
wx
.
navigateBack
({
wx
.
navigateBack
({
delta
:
1
delta
:
1
})
})
},
2000
)
},
2000
)
}
}
})
})
}
}
this
.
data
.
options
=
options
;
this
.
data
.
options
=
options
},
onHide
:
function
()
{
this
.
isBackend
=
true
this
.
pauseVA
()
clearInterval
(
this
.
heartbeat
)
},
onUnload
:
function
()
{
this
.
pauseVA
()
},
},
onHide
:
function
()
{
this
.
isBackend
=
true
;
this
.
pauseVA
();
clearInterval
(
this
.
heartbeat
);
},
onUnload
:
function
()
{
this
.
pauseVA
();
},
onShow
:
function
()
{
onShow
:
function
()
{
/* 兼容 android 这里发现 android 打开预览大图,然后关闭 自动播放视频,而且关不掉, 兼容android强制关闭视频 */
/* 兼容 android 这里发现 android 打开预览大图,然后关闭 自动播放视频,而且关不掉, 兼容android强制关闭视频 */
/* 这里没有 预览大图 关闭监听,所以 isBigPicShow 状态永远为 true */
/* 这里没有 预览大图 关闭监听,所以 isBigPicShow 状态永远为 true */
if
(
this
.
isBigPicShow
)
{
this
.
playVA
();
this
.
isBigPicShow
=
false
;
this
.
isBackend
=
false
;
return
;
}
if
(
this
.
isBigPicShow
)
{
this
.
playVA
()
this
.
isBigPicShow
=
false
this
.
isBackend
=
false
return
}
if
(
this
.
isBackend
)
{
if
(
this
.
isBackend
)
{
// this.setData({ 'initVAFlag': true });
// this.setData({ 'initVAFlag': true });
this
.
playVA
()
;
this
.
playVA
()
/* 这里调用,跟初始化调用时保持一致,其主要也是为了解决android从后台进入前台时出现的问题 */
/* 这里调用,跟初始化调用时保持一致,其主要也是为了解决android从后台进入前台时出现的问题 */
this
.
isBackend
=
false
;
this
.
isBackend
=
false
}
}
},
},
/* 生命周期函数--监听页面初次渲染完成 */
/* 生命周期函数--监听页面初次渲染完成 */
onReady
:
function
()
{
this
.
ajaxInitGetInfo
(
this
.
data
.
options
.
vid
,
this
.
data
.
options
.
type
);
},
onReady
:
function
()
{
this
.
ajaxInitGetInfo
(
this
.
data
.
options
.
vid
,
this
.
data
.
options
.
type
)
},
/* controlBar页面 - 切换音频页面 - bindTap事件 */
/* controlBar页面 - 切换音频页面 - bindTap事件 */
showContentAudio
:
function
()
{
showContentAudio
:
function
()
{
if
(
!
this
.
data
.
audio
.
src
)
{
wx
.
showToast
({
title
:
'暂无音频文件'
,
icon
:
'none'
});
return
;
}
if
(
!
this
.
data
.
audio
.
src
)
{
this
.
changeVideoAndAudio
({
content
:
'当前视频将暂停播放,请确认?'
,
setStorage
:
'videoCacheCtrlBar'
,
getStorage
:
'audioCacheCtrlBar'
,
isAudio
:
true
,
isVideo
:
false
});
wx
.
showToast
({
title
:
'暂无音频文件'
,
icon
:
'none'
})
return
}
this
.
changeVideoAndAudio
({
content
:
'当前视频将暂停播放,请确认?'
,
setStorage
:
'videoCacheCtrlBar'
,
getStorage
:
'audioCacheCtrlBar'
,
isAudio
:
true
,
isVideo
:
false
})
},
},
/* controlBar页面 - 切换视频页面 - bindTap事件 */
/* controlBar页面 - 切换视频页面 - bindTap事件 */
showContentVideo
:
function
()
{
showContentVideo
:
function
()
{
this
.
changeVideoAndAudio
({
content
:
'当前音频将暂停播放,请确认?'
,
setStorage
:
'audioCacheCtrlBar'
,
getStorage
:
'videoCacheCtrlBar'
,
isAudio
:
false
,
isVideo
:
true
});
this
.
changeVideoAndAudio
({
content
:
'当前音频将暂停播放,请确认?'
,
setStorage
:
'audioCacheCtrlBar'
,
getStorage
:
'videoCacheCtrlBar'
,
isAudio
:
false
,
isVideo
:
true
})
},
},
/* controlBar页面 - 切换音视频页面:辅助方法 - 1. 关闭音频或视频;2. 需要提示;3. 初始化视频记录或音频记录 */
/* controlBar页面 - 切换音视频页面:辅助方法 - 1. 关闭音频或视频;2. 需要提示;3. 初始化视频记录或音频记录 */
changeVideoAndAudio
:
function
(
obj
)
{
changeVideoAndAudio
:
function
(
obj
)
{
this
.
pauseVA
()
;
this
.
pauseVA
()
wx
.
showModal
({
wx
.
showModal
({
title
:
'提示'
,
content
:
obj
.
content
,
title
:
'提示'
,
content
:
obj
.
content
,
success
:
(
res
)
=>
{
success
:
(
res
)
=>
{
if
(
res
.
confirm
)
{
if
(
res
.
confirm
)
{
wx
.
setStorageSync
(
obj
.
setStorage
,
obj
.
getStorage
);
// wx.setStorageSync(obj.setStorage, obj.getStorage)
let
cache
=
wx
.
getStorageSync
(
obj
.
getStorage
);
let
cache
=
wx
.
getStorageSync
(
obj
.
getStorage
)
this
.
setData
({
'ctrlBar'
:
cache
});
this
.
setData
(
this
.
setData
({
'status.isAudio'
:
obj
.
isAudio
});
{
this
.
setData
({
'status.isVideo'
:
obj
.
isVideo
});
ctrlBar
:
cache
,
'status.isAudio'
:
obj
.
isAudio
,
/* 这里调用,解决VA视频初始化 */
'status.isVideo'
:
obj
.
isVideo
,
this
.
setData
({
'initVAFlag'
:
true
});
initVAFlag
:
true
setTimeout
(()
=>
{
},
this
.
seekVA
(
cache
.
initial_time
);
function
()
{
this
.
playVA
();
this
.
seekVA
(
cache
.
initial_time
)
},
200
)
this
.
playVA
()
}
)
}
}
}
}
})
;
})
},
},
/* controlBar页面 和 selectChapterList页面 - 切换章节列表 - bindTap事件 */
/* controlBar页面 和 selectChapterList页面 - 切换章节列表 - bindTap事件 */
jumpToOtherVA
:
function
(
e
)
{
jumpToOtherVA
:
function
(
e
)
{
/* 跳转时,清空当前播放状态 */
/* 跳转时,清空当前播放状态 */
this
.
heartbeat
&&
clearInterval
(
this
.
heartbeat
)
this
.
heartbeat
&&
clearInterval
(
this
.
heartbeat
)
let
_data
=
e
.
target
.
dataset
;
let
_data
=
e
.
target
.
dataset
if
(
!
_data
.
hasva
)
{
if
(
!
_data
.
hasva
)
{
/* 如果存在 - 课后习题类型, type:3、work_type:1 */
/* 如果存在 - 课后习题类型, type:3、work_type:1 */
let
i1
=
_data
.
index
,
i2
=
_data
.
index1
let
i1
=
_data
.
index
,
i2
=
_data
.
index1
let
_course
=
this
.
data
.
chapterList
.
course
[
i1
]
let
_course
=
this
.
data
.
chapterList
.
course
[
i1
]
if
(
_course
&&
_course
.
chapters
[
i2
]
&&
_course
.
chapters
[
i2
].
homework
)
{
if
(
_course
&&
_course
.
chapters
[
i2
]
&&
_course
.
chapters
[
i2
].
homework
)
{
let
_hw
=
_course
.
chapters
[
i2
].
homework
let
_hw
=
_course
.
chapters
[
i2
].
homework
...
@@ -243,91 +300,176 @@ Page({
...
@@ -243,91 +300,176 @@ Page({
wx
.
navigateTo
({
wx
.
navigateTo
({
url
:
'/pages/learnSystem/courseContent/examDetail/examDetail'
url
:
'/pages/learnSystem/courseContent/examDetail/examDetail'
})
})
return
;
return
}
}
wx
.
showToast
({
title
:
'请在PC上使用该功能'
,
icon
:
'none'
});
return
;
wx
.
showToast
({
title
:
'请在PC上使用该功能'
,
icon
:
'none'
})
return
}
}
this
.
isFirstInitAndSwitchVideo
=
true
;
this
.
isFirstInitAndSwitchVideo
=
true
this
.
statusClear
(
_data
.
name
,
_data
.
id
)
;
this
.
statusClear
(
_data
.
name
,
_data
.
id
)
this
.
ajaxInitGetInfo
(
_data
.
id
,
_data
.
type
);
this
.
ajaxInitGetInfo
(
_data
.
id
,
_data
.
type
)
},
},
/* controlBar页面 和 selectChapterList页面 - 切换章节列表: 辅助方法 - 1. 暂停视频;2. 关闭章节选择列表;3. 状态清理(status、videoCacheCtrlBar、audioCacheCtrlBar);4. 设置微信导航头 */
/* controlBar页面 和 selectChapterList页面 - 切换章节列表: 辅助方法 - 1. 暂停视频;2. 关闭章节选择列表;3. 状态清理(status、videoCacheCtrlBar、audioCacheCtrlBar);4. 设置微信导航头 */
statusClear
:
function
(
name
,
id
)
{
statusClear
:
function
(
name
,
id
)
{
this
.
pauseVA
();
this
.
pauseVA
()
this
.
closeSelectChapterList
();
this
.
closeSelectChapterList
()
let
initStatus
=
{
isLoading
:
true
,
isSupport
:
true
,
isSet
:
false
,
isAudio
:
false
,
isImages
:
false
,
isVideo
:
false
,
imagesLoaded
:
false
};
let
initStatus
=
{
this
.
setData
({
'status'
:
initStatus
});
isLoading
:
true
,
let
initCtrlBar
=
{
isPlay
:
false
,
initial_time
:
0
,
currentTime
:
'00:00'
,
totalTime
:
'00:00'
,
progress
:
'0%'
,
curRate
:
'1.0X'
,
jumpFlag
:
false
,
vid
:
id
};
isSupport
:
true
,
wx
.
setStorageSync
(
'videoCacheCtrlBar'
,
initCtrlBar
);
isSet
:
false
,
wx
.
setStorageSync
(
'audioCacheCtrlBar'
,
initCtrlBar
);
isAudio
:
false
,
wx
.
setNavigationBarTitle
({
title
:
name
||
'音视频'
});
isImages
:
false
,
isVideo
:
false
,
imagesLoaded
:
false
}
this
.
setData
({
status
:
initStatus
})
let
initCtrlBar
=
{
isPlay
:
false
,
initial_time
:
0
,
currentTime
:
'00:00'
,
totalTime
:
'00:00'
,
progress
:
'0%'
,
curRate
:
'1.0X'
,
jumpFlag
:
false
,
vid
:
id
}
wx
.
setStorageSync
(
'videoCacheCtrlBar'
,
initCtrlBar
)
wx
.
setStorageSync
(
'audioCacheCtrlBar'
,
initCtrlBar
)
wx
.
setNavigationBarTitle
({
title
:
name
||
'音视频'
})
},
},
/* controlBar页面 - 上一章 - bindTap事件 */
/* controlBar页面 - 上一章 - bindTap事件 */
prevChapter
:
function
(
e
)
{
if
(
!
e
.
target
.
dataset
.
id
)
{
wx
.
showToast
({
title
:
'已经是第一章了.'
,
icon
:
'none'
});
return
;
};
this
.
jumpToOtherVA
(
e
);
},
prevChapter
:
function
(
e
)
{
if
(
!
e
.
target
.
dataset
.
id
)
{
wx
.
showToast
({
title
:
'已经是第一章了.'
,
icon
:
'none'
})
return
}
this
.
jumpToOtherVA
(
e
)
},
/* controlBar页面 - 下一章 - bindTap事件 */
/* controlBar页面 - 下一章 - bindTap事件 */
nextChapter
:
function
(
e
)
{
if
(
!
e
.
target
.
dataset
.
id
)
{
wx
.
showToast
({
title
:
'已经是最后一章了.'
,
icon
:
'none'
});
return
;
};
this
.
jumpToOtherVA
(
e
);
},
nextChapter
:
function
(
e
)
{
if
(
!
e
.
target
.
dataset
.
id
)
{
wx
.
showToast
({
title
:
'已经是最后一章了.'
,
icon
:
'none'
})
return
}
this
.
jumpToOtherVA
(
e
)
},
/* controlBar页面 - 打开切换章节列表 - bindTap事件 */
/* controlBar页面 - 打开切换章节列表 - bindTap事件 */
openSelectChapterList
:
function
()
{
this
.
setData
({
'chapterList.isShow'
:
true
});
},
openSelectChapterList
:
function
()
{
this
.
setData
({
'chapterList.isShow'
:
true
})
},
/* controlBar页面 - 关闭切换章节列表 - bindTap事件和内部调用 */
/* controlBar页面 - 关闭切换章节列表 - bindTap事件和内部调用 */
closeSelectChapterList
:
function
()
{
this
.
setData
({
'chapterList.isShow'
:
false
});
},
closeSelectChapterList
:
function
()
{
this
.
setData
({
'chapterList.isShow'
:
false
})
},
/* controlBar页面 - 打开图片轮播页面 - bindTap事件 */
/* controlBar页面 - 打开图片轮播页面 - bindTap事件 */
openContentImages
:
function
()
{
this
.
setData
({
'status.isImages'
:
true
});
},
openContentImages
:
function
()
{
this
.
pauseVA
()
this
.
setData
({
'status.isImages'
:
true
})
},
/* controlBar页面 - 关闭图片轮播页面 - bindTap事件 */
/* controlBar页面 - 关闭图片轮播页面 - bindTap事件 */
closeContentImages
:
function
()
{
closeContentImages
:
function
()
{
this
.
setData
({
'status.isImages'
:
false
});
this
.
playVA
()
this
.
setData
({
'status.isImages'
:
false
})
/* 兼容 android 发现打开previewImage后,从swiper 切换回 视频播放页,视频会自动暂停 */
/* 兼容 android 发现打开previewImage后,从swiper 切换回 视频播放页,视频会自动暂停 */
// this.data.status.isVideo && this.pauseVA();
// this.data.status.isVideo && this.pauseVA();
// wx.getStorageSync('videoCacheCtrlBar').isPlay && this.playVA();
// wx.getStorageSync('videoCacheCtrlBar').isPlay && this.playVA();
},
},
/* controlBar页面 - 打开设置面板 - bindTap事件 */
/* controlBar页面 - 打开设置面板 - bindTap事件 */
openSetContent
:
function
()
{
this
.
setData
({
'status.isSet'
:
true
});
},
openSetContent
:
function
()
{
this
.
data
.
status
.
isSet
?
this
.
playVA
()
:
this
.
pauseVA
()
this
.
setData
({
'status.isSet'
:
!
this
.
data
.
status
.
isSet
})
},
/* controlBar页面 - 关闭设置面板 - bindTap事件 */
/* controlBar页面 - 关闭设置面板 - bindTap事件 */
closeSetContent
:
function
()
{
this
.
setData
({
'status.isSet'
:
false
});
},
closeSetContent
:
function
()
{
this
.
setData
({
'status.isSet'
:
false
},
function
()
{
this
.
playVA
()
})
},
/* contentImages页面 - 点击放大图 - bindTap事件 */
/* contentImages页面 - 点击放大图 - bindTap事件 */
showBigImage
:
function
()
{
showBigImage
:
function
()
{
let
_obj
=
this
.
data
.
image
let
_obj
=
this
.
data
.
image
/* 兼容 android 暂停后 回退回来,视频未暂停还在继续播放,但进度条失去作用,所以需要 onShow中 重新调用 暂停方法 */
/* 兼容 android 暂停后 回退回来,视频未暂停还在继续播放,但进度条失去作用,所以需要 onShow中 重新调用 暂停方法 */
this
.
isBigPicShow
=
true
this
.
isBigPicShow
=
true
wx
.
previewImage
({
current
:
_obj
.
imgUrls
[
_obj
.
selectIndex
],
urls
:
_obj
.
imgUrls
})
wx
.
previewImage
({
current
:
_obj
.
imgUrls
[
_obj
.
selectIndex
],
urls
:
_obj
.
imgUrls
})
},
},
/* Swiper标签 - 轮播图切换时 - bindchange事件 */
/* Swiper标签 - 轮播图切换时 - bindchange事件 */
imageSelectIndexUpdate
:
function
(
e
)
{
this
.
setData
({
'image.selectIndex'
:
e
.
detail
.
current
});
},
imageSelectIndexUpdate
:
function
(
e
)
{
this
.
setData
({
'image.selectIndex'
:
e
.
detail
.
current
})
},
/* VideoOrAudio image标签 - 图片开始加载 注意:图片过大时,有个加载状态 */
/* VideoOrAudio image标签 - 图片开始加载 注意:图片过大时,有个加载状态 */
imagesLoadBegin
:
function
()
{
this
.
setData
({
'status.imagesLoaded'
:
false
})
},
imagesLoadBegin
:
function
()
{
this
.
setData
({
'status.imagesLoaded'
:
false
})
},
/* contentAudio页面 - 图片加载完成 - bindload事件 */
/* contentAudio页面 - 图片加载完成 - bindload事件 */
imagesLoaded
:
function
()
{
this
.
setData
({
'status.imagesLoaded'
:
true
})
},
imagesLoaded
:
function
()
{
this
.
setData
({
'status.imagesLoaded'
:
true
})
},
/* controlBar页面 - 播放音视频 - bindTap事件和内部调用 */
/* controlBar页面 - 播放音视频 - bindTap事件和内部调用 */
playVA
:
function
()
{
playVA
:
function
()
{
let
_data
=
this
.
data
,
_status
=
_data
.
status
let
_data
=
this
.
data
,
_status
=
_data
.
status
this
.
setData
({
'ctrlBar.isPlay'
:
true
})
this
.
setData
({
'ctrlBar.isPlay'
:
true
})
_status
.
isVideo
&&
this
.
_video
.
play
()
;
_status
.
isVideo
&&
this
.
_video
.
play
()
_status
.
isAudio
&&
this
.
_audio
.
play
()
;
_status
.
isAudio
&&
this
.
_audio
.
play
()
this
.
setHeartbeat
()
this
.
setHeartbeat
()
},
},
/* controlBar页面 - 暂停音视频 - bindTap事件和内部调用 */
/* controlBar页面 - 暂停音视频 - bindTap事件和内部调用 */
pauseVA
:
function
()
{
pauseVA
:
function
()
{
let
_data
=
this
.
data
,
_status
=
_data
.
status
let
_data
=
this
.
data
,
_status
=
_data
.
status
this
.
setData
({
'ctrlBar.isPlay'
:
false
})
this
.
setData
({
'ctrlBar.isPlay'
:
false
})
_status
.
isVideo
&&
this
.
_video
.
pause
()
_status
.
isVideo
&&
this
.
_video
.
pause
()
_status
.
isAudio
&&
this
.
_audio
.
pause
()
_status
.
isAudio
&&
this
.
_audio
.
pause
()
clearInterval
(
this
.
heartbeat
)
clearInterval
(
this
.
heartbeat
)
},
},
/* controlBar页面 - 点击进度条跳到某个位置播放 - bindtouchstart事件 */
/* controlBar页面 - 点击进度条跳到某个位置播放 - bindtouchstart事件 */
tapToSeek
:
function
(
e
)
{
let
pLine
=
wx
.
getSystemInfoSync
().
windowWidth
-
e
.
currentTarget
.
offsetLeft
*
2
,
pos
=
e
.
touches
[
0
].
pageX
,
_data
=
this
.
data
,
_status
=
_data
.
status
,
_obj
=
_status
.
isVideo
?
this
.
_video
:
this
.
_audio
;
this
.
seekVA
(
parseInt
(
pos
/
pLine
*
_obj
.
totalTime
));
},
tapToSeek
:
function
(
e
)
{
let
pLine
=
wx
.
getSystemInfoSync
().
windowWidth
-
e
.
currentTarget
.
offsetLeft
*
2
,
pos
=
e
.
touches
[
0
].
pageX
,
_data
=
this
.
data
,
_status
=
_data
.
status
,
_obj
=
_status
.
isVideo
?
this
.
_video
:
this
.
_audio
this
.
seekVA
(
parseInt
((
pos
/
pLine
)
*
_obj
.
totalTime
))
},
/* VideoOrAudio - 跳到某个点开始播放 */
/* VideoOrAudio - 跳到某个点开始播放 */
seekVA
:
function
(
time
)
{
let
_data
=
this
.
data
,
_status
=
_data
.
status
;
_status
.
isVideo
&&
this
.
_video
.
seek
(
time
);
_status
.
isAudio
&&
this
.
_audio
.
seek
(
time
);
},
seekVA
:
function
(
time
)
{
let
_data
=
this
.
data
,
_status
=
_data
.
status
_status
.
isVideo
&&
this
.
_video
.
seek
(
time
)
_status
.
isAudio
&&
this
.
_audio
.
seek
(
time
)
},
/* setContent页面 - 跳过片头 - bindTap事件 */
/* setContent页面 - 跳过片头 - bindTap事件 */
jumpHead
:
function
()
{
this
.
setData
({
'ctrlBar.jumpFlag'
:
!
this
.
data
.
ctrlBar
.
jumpFlag
});
},
jumpHead
:
function
()
{
this
.
setData
({
'ctrlBar.jumpFlag'
:
!
this
.
data
.
ctrlBar
.
jumpFlag
})
},
/* setContent页面 - 后退15s音视频 - bindTap事件 */
/* setContent页面 - 后退15s音视频 - bindTap事件 */
slow15s
:
function
()
{
let
_data
=
this
.
data
,
_status
=
_data
.
status
;
_status
.
isVideo
&&
this
.
_video
.
fastSlow15
(
'-15'
);
_status
.
isAudio
&&
this
.
_audio
.
fastSlow15
(
'-15'
);
},
slow15s
:
function
()
{
let
_data
=
this
.
data
,
_status
=
_data
.
status
_status
.
isVideo
&&
this
.
_video
.
fastSlow15
(
'-15'
)
_status
.
isAudio
&&
this
.
_audio
.
fastSlow15
(
'-15'
)
},
/* setContent页面 - 快进15s音视频 - bindTap事件 */
/* setContent页面 - 快进15s音视频 - bindTap事件 */
fast15s
:
function
()
{
let
_data
=
this
.
data
,
_status
=
_data
.
status
;
_status
.
isVideo
&&
this
.
_video
.
fastSlow15
(
'15'
);
_status
.
isAudio
&&
this
.
_audio
.
fastSlow15
(
'15'
);
},
fast15s
:
function
()
{
let
_data
=
this
.
data
,
_status
=
_data
.
status
_status
.
isVideo
&&
this
.
_video
.
fastSlow15
(
'15'
)
_status
.
isAudio
&&
this
.
_audio
.
fastSlow15
(
'15'
)
},
/* setContent页面 - 改变播放倍率 注意:音频不支持倍速 - bindTap事件 */
/* setContent页面 - 改变播放倍率 注意:音频不支持倍速 - bindTap事件 */
setRate
:
function
()
{
setRate
:
function
()
{
let
_data
=
this
.
data
,
_status
=
_data
.
status
let
_data
=
this
.
data
,
if
(
_status
.
isAudio
)
{
wx
.
showToast
({
title
:
'音频暂不支持倍速'
,
icon
:
'none'
});
return
;
}
_status
=
_data
.
status
if
(
_status
.
isAudio
)
{
wx
.
showToast
({
title
:
'音频暂不支持倍速'
,
icon
:
'none'
})
return
}
let
_obj
=
this
.
_video
let
_obj
=
this
.
_video
_obj
.
rate
()
_obj
.
rate
()
this
.
setData
({
'ctrlBar.curRate'
:
_obj
.
RATE
[
_obj
.
rateIndex
]
+
'X'
})
this
.
setData
({
'ctrlBar.curRate'
:
_obj
.
RATE
[
_obj
.
rateIndex
]
+
'X'
})
...
@@ -336,37 +478,51 @@ Page({
...
@@ -336,37 +478,51 @@ Page({
beginAndOutFullScreen
:
function
(
e
)
{},
beginAndOutFullScreen
:
function
(
e
)
{},
/* VideoOrAudio标签 - 开始/继续播放时触发play事件时,触发 - bindplay事件 */
/* VideoOrAudio标签 - 开始/继续播放时触发play事件时,触发 - bindplay事件 */
beginPlayVA
:
function
()
{
beginPlayVA
:
function
()
{
if
(
this
.
data
.
initVAFlag
)
{
if
(
this
.
data
.
initVAFlag
)
{
this
.
setData
({
'initVAFlag'
:
false
})
this
.
setData
({
initVAFlag
:
false
})
this
.
setHeartbeat
()
//安卓手机播放之后才会上送进度
this
.
setHeartbeat
()
//安卓手机播放之后才会上送进度
}
}
/* iphone6 8.4.1 首次初始化时,不能直接 设置进度并播放 */
/* iphone6 8.4.1 首次初始化时,不能直接 设置进度并播放 */
if
(
this
.
isFirstInitAndSwitchVideo
)
{
if
(
this
.
isFirstInitAndSwitchVideo
)
{
if
(
!
this
.
_cache
)
this
.
_cache
=
wx
.
getStorageSync
(
'videoCacheCtrlBar'
)
||
{}
if
(
!
this
.
_cache
)
this
.
seekVA
(
this
.
_cache
.
initial_time
);
this
.
_cache
=
wx
.
getStorageSync
(
'videoCacheCtrlBar'
)
||
{}
this
.
isFirstInitAndSwitchVideo
=
false
;
this
.
seekVA
(
this
.
_cache
.
initial_time
)
this
.
isFirstInitAndSwitchVideo
=
false
}
}
},
},
/* VideoOrAudio标签 - 暂停播放时触发pause事件时,触发 - bindpause事件 */
/* VideoOrAudio标签 - 暂停播放时触发pause事件时,触发 - bindpause事件 */
beginPauseVA
:
function
()
{
beginPauseVA
:
function
()
{},
},
/* VideoOrAudio标签 - 当播放到末尾时,触发 - bindended事件 */
/* VideoOrAudio标签 - 当播放到末尾时,触发 - bindended事件 */
playEnded
:
function
()
{
wx
.
showToast
({
title
:
'当前音/视频播放完毕。'
,
icon
:
'none'
});
this
.
pauseVA
();
},
playEnded
:
function
()
{
wx
.
showToast
({
title
:
'当前音/视频播放完毕。'
,
icon
:
'none'
})
this
.
pauseVA
()
},
/* VideoOrAudio标签 - 视频播放错误时,触发 - binderror事件 */
/* VideoOrAudio标签 - 视频播放错误时,触发 - binderror事件 */
playError
:
function
(
e
)
{
},
playError
:
function
(
e
)
{},
/* VideoOrAudio标签 - 视频播放发生变化时 - bindtimeupdate事件 */
/* VideoOrAudio标签 - 视频播放发生变化时 - bindtimeupdate事件 */
timeUpdate
:
function
(
e
)
{
timeUpdate
:
function
(
e
)
{
let
_data
=
this
.
data
,
_status
=
_data
.
status
,
_detail
=
e
.
detail
,
_obj
=
_status
.
isVideo
?
this
.
_video
:
this
.
_audio
let
_data
=
this
.
data
,
_status
=
_data
.
status
,
_detail
=
e
.
detail
,
_obj
=
_status
.
isVideo
?
this
.
_video
:
this
.
_audio
_obj
.
currentTime
=
parseInt
(
_detail
.
currentTime
)
_obj
.
currentTime
=
parseInt
(
_detail
.
currentTime
)
_obj
.
totalTime
=
parseInt
(
_detail
.
duration
)
_obj
.
totalTime
=
parseInt
(
_detail
.
duration
)
this
.
setData
({
'ctrlBar.progress'
:
_obj
.
currentTime
/
_obj
.
totalTime
*
100
+
'%'
});
this
.
setData
({
this
.
setData
({
'ctrlBar.currentTime'
:
util
.
durationToTimeString
(
_obj
.
currentTime
)
});
'ctrlBar.progress'
:
(
_obj
.
currentTime
/
_obj
.
totalTime
)
*
100
+
'%'
this
.
setData
({
'ctrlBar.totalTime'
:
util
.
durationToTimeString
(
_obj
.
totalTime
)
})
})
this
.
setData
({
'ctrlBar.currentTime'
:
util
.
durationToTimeString
(
_obj
.
currentTime
)
})
this
.
setData
({
'ctrlBar.totalTime'
:
util
.
durationToTimeString
(
_obj
.
totalTime
)
})
/* 实时改变 当前的PPT当前页 */
/* 实时改变 当前的PPT当前页 */
let
arr
=
this
.
data
.
image
.
timeArr
let
arr
=
this
.
data
.
image
.
timeArr
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
if
(
_obj
.
currentTime
>=
arr
[
i
]
&&
(
i
+
1
<
arr
.
length
?
_obj
.
currentTime
<
arr
[
i
+
1
]
:
1
))
{
if
(
_obj
.
currentTime
>=
arr
[
i
]
&&
(
i
+
1
<
arr
.
length
?
_obj
.
currentTime
<
arr
[
i
+
1
]
:
1
)
)
{
this
.
setData
({
'image.current'
:
i
})
this
.
setData
({
'image.current'
:
i
})
break
break
}
}
...
@@ -381,17 +537,18 @@ Page({
...
@@ -381,17 +537,18 @@ Page({
this
.
heartbeat
=
setInterval
(()
=>
{
this
.
heartbeat
=
setInterval
(()
=>
{
/* 如果是初始加载状态,就不计算时间状态 和 提交进度了 */
/* 如果是初始加载状态,就不计算时间状态 和 提交进度了 */
if
(
this
.
data
.
initVAFlag
)
return
;
if
(
this
.
data
.
initVAFlag
)
return
let
arr
=
_data
.
ctrlBar
.
currentTime
.
split
(
':'
),
tempTime
=
parseInt
(
arr
[
0
]
*
60
)
+
parseInt
(
arr
[
1
]);
let
arr
=
_data
.
ctrlBar
.
currentTime
.
split
(
':'
),
tempTime
=
parseInt
(
arr
[
0
]
*
60
)
+
parseInt
(
arr
[
1
])
this
.
setData
({
'ctrlBar.initial_time'
:
tempTime
})
this
.
setData
({
'ctrlBar.initial_time'
:
tempTime
})
/* 这里改成异步的,试一下 */
/* 这里改成异步的,试一下 */
wx
.
setStorage
({
wx
.
setStorage
({
'key'
:
'videoCacheCtrlBar'
,
key
:
'videoCacheCtrlBar'
,
'data'
:
_data
.
ctrlBar
data
:
_data
.
ctrlBar
})
})
wx
.
setStorage
({
wx
.
setStorage
({
'key'
:
'audioCacheCtrlBar'
,
key
:
'audioCacheCtrlBar'
,
'data'
:
_data
.
ctrlBar
data
:
_data
.
ctrlBar
})
})
/* 由于 音视频相同,所以 设置方式设置成一致就可以了 */
/* 由于 音视频相同,所以 设置方式设置成一致就可以了 */
/* 提交进度请求, 进度进行中,才计算上进度时间 */
/* 提交进度请求, 进度进行中,才计算上进度时间 */
...
...
learnOnline/pages/videoPlayer/show.wxml
浏览文件 @
676769a8
...
@@ -13,14 +13,16 @@
...
@@ -13,14 +13,16 @@
<template is='pageLoading'></template>
<template is='pageLoading'></template>
</block>
</block>
<block wx:if='{{status.isSupport}}'>
<block wx:if='{{status.isSupport}}'>
<template is='contentAudio' data='{{status, audio, image, ctrlBar}}'></template>
<template is='contentVideo' data='{{status, video, chapterList, ctrlBar}}'></template>
<block wx:if='{{status.isSet}}'>
<block wx:if='{{status.isSet}}'>
<template is='setContent' data='{{ctrlBar}}'></template>
<template is='setContent' data='{{ctrlBar}}'></template>
</block><block wx:elif='{{status.isImages}}'>
</block>
<block wx:elif='{{status.isImages}}'>
<template is='contentImages' data='{{status, image}}'></template>
<template is='contentImages' data='{{status, image}}'></template>
</block>
</block>
<template is='contentAudio' data='{{status, audio, image, ctrlBar}}'></template>
</block>
<template is='contentVideo' data='{{status, video, chapterList, ctrlBar}}'></template>
<block wx:else>
</block><block wx:else>
<template is='noSupport'></template>
<template is='noSupport'></template>
</block>
</block>
<template is='controlBar' data='{{status, video, ctrlBar, chapterList, initVAFlag}}'></template>
<template is='controlBar' data='{{status, video, ctrlBar, chapterList, initVAFlag}}'></template>
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论