vue 关于视频播放器vue-video-player,PC端正常,苹果手机初始化没有办法设置进度,currentTime 设置不生效解决
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
1.最近项目用了vue-video-player插件 去做视频音频的设置播放,要做一个断点继播的功能,发现苹果手机没有办法实现currentTime 初始化设置进度,后面百度很久解决如下 记录下
重点是
@timeupdate="onPlayerTimeupdate($event)" (如果要做苹果端兼容就加这个放)
这个是初始化的时候设置音视频进度的方法
@loadeddata="onPlayerLoadeddata($event)"
怎么用这个插件大家看看http://t.csdn.cn/XfZjf 这个博友的文章
<div class="curriculum-video-part1" v-if="videoSource &&videoSource.length > 0">
<video-player
class="video-player vjs-custom-skin"
ref="videoPlayer"
@timeupdate="onPlayerTimeupdate($event)"
@loadeddata="onPlayerLoadeddata($event)"
@play="onPlayerPlay($event)"
@playing="onPlayerPlaying($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@ready="playerReadied"
:playsinline="true"
:options="playerOptions"
></video-player>
具体方法内容 在methods添加
//当前播放位置发生变化时触发。
onPlayerTimeupdate(player) {
this.durations = player.cache_.currentTime
console.log('当前播放位置发生变化时触发。', this.durations, player.cache_.currentTime)
},
// 当播放器在当前播放位置下载数据时触发 this.chapterDate.vod_log.read_time 这个是你初始化要设置的时间进度
onPlayerLoadeddata(player) {
player.play()
player.currentTime(this.chapterDate.vod_log.read_time)
},




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:9 个月前 )
9e887079
[skip ci] 8 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
更多推荐
所有评论(0)