<video :show-fullscreen-btn="false" :show-play-btn="false" src="https://media.w3.org/2010/05/sintel/trailer.mp4"
:poster="videoActive.PicPath" autoplay="true" :controls="false" nitial-time="0" page-gesture="true"
@timeupdate="timeUpdate" @loadedmetadata="loadedMetadata" :duration="start">
<cover-view style="position: absolute;bottom: 128rpx;right: 60rpx;color: #fff;cursor: pointer;"
@click="changeShowWidth">
<image src="/static/study/window.jpg" mode=""></image>
</cover-view>
</video>
<view class="log">
<view class="jindu" v-show="timeNow">
<view class="miao">
{{timeNow}}
</view>
<slider class="jindus" :value="sliderValue" :max="end" @change="onSliderChange"
@changing="onSliderChanging" backgroundColor="#686763" block-size="10">
</slider>
<view class="sudu" @click.stop="changeNum">
倍速 <text>x{{num}}</text>
</view>
</view>
</view>
上面是html
这里是js
let videoContext = uni.createVideoContext('myVideo')
const showWidht = ref(false)
const changeShowWidth = () => {
if (showWidht.value) {
showWidht.value = false
videoContext.requestFullScreen()
} else {
showWidht.value = true
videoContext.exitFullScreen()
}
}
//倍速
const doubleSpeed = () => {
//这里的'myVideo'要和上方video标签的id相对应
videoContext.requestFullScreen() //全屏
return
// videoContext.pause() //暂停
videoContext.pause({
direction: 90
}) //全屏
// videoContext.exitFullScreen() //半屏幕
// videoContext.playbackRate(0.5) //倍速0.5/0.8/1.0/1.25/1.5
}
const sliderValue = ref(0);
const start = ref(0)
const end = ref(0)
const timeNow = ref('')
// 时间格式化函数
const formatTime = (seconds) => {
const minutes = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
};
// 播放时间更新
const timeUpdate = (e) => {
if (change.value) {
return
}
start.value = e.detail.currentTime;
end.value = e.detail.duration;
timeNow.value = `${formatTime(start.value)}/${formatTime(end.value)}`;
sliderValue.value = start.value;
};
// 元数据加载完成
const loadedMetadata = (e) => {
end.value = e.target.duration;
};
const change = ref(false)
// 进度条变化时
const onSliderChanging = (value) => {
start.value = value.detail.value
videoContext.seek(value.detail.value)
change.value = true
timeNow.value = `${formatTime(start.value)}/${formatTime(end.value)}`;
};
// 进度条变化完成时
const onSliderChange = (value) => {
change.value = false
videoContext.seek(value.detail.value)
timeNow.value = `${formatTime(value.detail.value)}/${formatTime(end.value)}`;
};
//修改倍速
const changeNum = () => {
num.value == 1 ? num.value = 1.25 : num.value == 1.25 ? num.value = 1.5 : num.value == 1.5 ? num.value = 1 : 1
videoContext.playbackRate(num.value) //倍速0.5/0.8/1.0/1.25/1.5
}