提交 676769a8 authored 作者: 王鹏飞's avatar 王鹏飞

fix:修复视频播放问题

上级 5f5f129e
...@@ -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",
......
<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>
......
<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
...@@ -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: '第一章:重要概念', {
chapters: [ title: '第一章:重要概念',
{ id: '11', time: '28:18', name: '1.1 现值(PV)和终值(FV)' }, chapters: [
{ id: '12', time: '19:09', name: '1.2 净现值(NPV)及实际收益率' } { id: '11', time: '28:18', name: '1.1 现值(PV)和终值(FV)' },
] { id: '12', time: '19:09', name: '1.2 净现值(NPV)及实际收益率' }
}, { ]
title: '第二章:证券估值', },
chapters: [ {
{ id: '21', time: '27:49', name: '2.1 债券和股票的现金流贴现估值方法' }, title: '第二章:证券估值',
{ id: '22', time: '16:04', name: '2.2 债券评级及债券协议' }, chapters: [
{ id: '23', time: '', name: '公司金融第二周测验' }, {
{ id: '24', time: '', name: '公司金融第二周作业' } id: '21',
] time: '27:49',
}], name: '2.1 债券和股票的现金流贴现估值方法'
},
{ id: '22', time: '16:04', name: '2.2 债券评级及债券协议' },
{ id: '23', 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,36 +139,45 @@ Page({ ...@@ -123,36 +139,45 @@ 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(() => {
/* android 手机有时候 播放失效,追加 autoPlay 自动播放 */ /* android 手机有时候 播放失效,追加 autoPlay 自动播放 */
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
}) })
/* 由于 音视频相同,所以 设置方式设置成一致就可以了 */ /* 由于 音视频相同,所以 设置方式设置成一致就可以了 */
/* 提交进度请求, 进度进行中,才计算上进度时间 */ /* 提交进度请求, 进度进行中,才计算上进度时间 */
...@@ -404,4 +561,4 @@ Page({ ...@@ -404,4 +561,4 @@ Page({
} }
}, 10000) }, 10000)
} }
}) })
\ No newline at end of file
...@@ -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 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论