- 发布:2022-10-11 11:00
- 更新:2023-01-11 11:34
- 阅读:476
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows 10 专业版 19044.2075
HBuilderX类型: 正式
HBuilderX版本号: 3.6.4
手机系统: 全部
手机厂商: 华为
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
测试过的手机:
示例代码:
测试代码:
<template>
<view class="chat_video_all">
<video id="videoPlayer"
autoplay
class="chat_video"
:src="url"
@timeupdate="timeupdate"
@play="startRecord"
@pause = "stopRecord"
@ended = "stopRecord"
>
<cover-view class="video_close"></cover-view>
<cover-view :class="playSpeed === speedArray.speed1_5.speed ? 'video_speed1 video_speed_choosed' : 'video_speed1'" @click="changeSpeed(speedArray.speed1_5.speed)">{{speedArray.speed1_5.speed}}</cover-view>
<cover-view :class="playSpeed === speedArray.speed1_25.speed ? 'video_speed2 video_speed_choosed' : 'video_speed2'" @click="changeSpeed(speedArray.speed1_25.speed)">{{speedArray.speed1_25.speed}}</cover-view>
<cover-view :class="playSpeed === speedArray.speed1_0.speed ? 'video_speed3 video_speed_choosed' : 'video_speed3'" @click="changeSpeed(speedArray.speed1_0.speed)">{{speedArray.speed1_0.speed}}</cover-view>
</video>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
loading: false,
url: '',
playSpeed: 1.0,
speedArray: {
speed1_5: {
speed: 1.5
},
speed1_25: {
speed: 1.25
},
speed1_0: {
speed: 1.0
}
},
videoContext: null
}
},
onLoad() {
this.loading = true;
this.url = "https://img.tzruiqijiaoyu.com/video/v2/yOXg9CbO1rYF6ewcHC2MF6bHu729Mrgocj4N--0Z4EU9F0vQSzp4Yc6K6dyhb4JRbaHXtVmqftqz7xoWLBdD4UPoqR5PUkaYEXvJgyTQBS4gQvBpUnsteBs_9rK7EbjC.mp4";
// this.url = "https://img.tzruiqijiaoyu.com/video/v2/yOXg9CbO1rYF6ewcHC2MF-KoggIH77pWz9QNS5HqRuj61Fr4C_NAyG8aPlPXcU81KYAyMgbN01Ix5QphOxlt-HZHoOcGjUAl6z_ABTsEwc_wSrPR7E5CMbhITTWQWRfI.mp4";
this.loading = false;
},
onReady() {
this.videoContext = uni.createVideoContext("videoPlayer");
},
methods: {
changeSpeed(speed) {
this.playSpeed = speed;
this.changePlaybackRate(speed);
},
changePlaybackRate(rate) {//设置播放倍速
this.videoContext.playbackRate(rate);
},
timeupdate() {
},
startRecord() {
},
stopRecord() {
}
}
}
</script>
<style>
.video_speed1{ height: 40rpx;line-height: 32rpx; width: 70rpx; text-align: center; border: 1rpx solid #fff; border-radius: 12rpx; color: #fff; z-index: 10; top:var(--status-bar-height); margin-top: 30rpx; right:30rpx; font-size: 24rpx; position: absolute;}
.video_speed2{ height: 40rpx;line-height: 32rpx; width: 70rpx; text-align: center; border: 1rpx solid #fff; border-radius: 12rpx; color: #fff; z-index: 10; top:var(--status-bar-height); margin-top: 30rpx; right:120rpx; font-size: 24rpx; position: absolute;}
.video_speed3{ height: 40rpx;line-height: 32rpx; width: 70rpx; text-align: center; border: 1rpx solid #fff; border-radius: 12rpx; color: #fff; z-index: 10; top:var(--status-bar-height); margin-top: 30rpx; right:210rpx; font-size: 24rpx; position: absolute;}
.video_speed_choosed{ background: #fff; color: #000;}
</style>
测试代码:
<template>
<view class="chat_video_all">
<video id="videoPlayer"
autoplay
class="chat_video"
:src="url"
@timeupdate="timeupdate"
@play="startRecord"
@pause = "stopRecord"
@ended = "stopRecord"
>
<cover-view class="video_close"></cover-view>
<cover-view :class="playSpeed === speedArray.speed1_5.speed ? 'video_speed1 video_speed_choosed' : 'video_speed1'" @click="changeSpeed(speedArray.speed1_5.speed)">{{speedArray.speed1_5.speed}}</cover-view>
<cover-view :class="playSpeed === speedArray.speed1_25.speed ? 'video_speed2 video_speed_choosed' : 'video_speed2'" @click="changeSpeed(speedArray.speed1_25.speed)">{{speedArray.speed1_25.speed}}</cover-view>
<cover-view :class="playSpeed === speedArray.speed1_0.speed ? 'video_speed3 video_speed_choosed' : 'video_speed3'" @click="changeSpeed(speedArray.speed1_0.speed)">{{speedArray.speed1_0.speed}}</cover-view>
</video>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
loading: false,
url: '',
playSpeed: 1.0,
speedArray: {
speed1_5: {
speed: 1.5
},
speed1_25: {
speed: 1.25
},
speed1_0: {
speed: 1.0
}
},
videoContext: null
}
},
onLoad() {
this.loading = true;
this.url = "https://img.tzruiqijiaoyu.com/video/v2/yOXg9CbO1rYF6ewcHC2MF6bHu729Mrgocj4N--0Z4EU9F0vQSzp4Yc6K6dyhb4JRbaHXtVmqftqz7xoWLBdD4UPoqR5PUkaYEXvJgyTQBS4gQvBpUnsteBs_9rK7EbjC.mp4";
// this.url = "https://img.tzruiqijiaoyu.com/video/v2/yOXg9CbO1rYF6ewcHC2MF-KoggIH77pWz9QNS5HqRuj61Fr4C_NAyG8aPlPXcU81KYAyMgbN01Ix5QphOxlt-HZHoOcGjUAl6z_ABTsEwc_wSrPR7E5CMbhITTWQWRfI.mp4";
this.loading = false;
},
onReady() {
this.videoContext = uni.createVideoContext("videoPlayer");
},
methods: {
changeSpeed(speed) {
this.playSpeed = speed;
this.changePlaybackRate(speed);
},
changePlaybackRate(rate) {//设置播放倍速
this.videoContext.playbackRate(rate);
},
timeupdate() {
},
startRecord() {
},
stopRecord() {
}
}
}
</script>
<style>
.video_speed1{ height: 40rpx;line-height: 32rpx; width: 70rpx; text-align: center; border: 1rpx solid #fff; border-radius: 12rpx; color: #fff; z-index: 10; top:var(--status-bar-height); margin-top: 30rpx; right:30rpx; font-size: 24rpx; position: absolute;}
.video_speed2{ height: 40rpx;line-height: 32rpx; width: 70rpx; text-align: center; border: 1rpx solid #fff; border-radius: 12rpx; color: #fff; z-index: 10; top:var(--status-bar-height); margin-top: 30rpx; right:120rpx; font-size: 24rpx; position: absolute;}
.video_speed3{ height: 40rpx;line-height: 32rpx; width: 70rpx; text-align: center; border: 1rpx solid #fff; border-radius: 12rpx; color: #fff; z-index: 10; top:var(--status-bar-height); margin-top: 30rpx; right:210rpx; font-size: 24rpx; position: absolute;}
.video_speed_choosed{ background: #fff; color: #000;}
</style>
操作步骤:
使用附件的项目复现
使用附件的项目复现
预期结果:
video音画同步,倍速播放时音画同步
video音画同步,倍速播放时音画同步
实际结果:
video音画不同步,倍速播放时音画不同步
video音画不同步,倍速播放时音画不同步
newActivity (作者)
rendenjs
2023-01-12 16:47