文章来源地址https://www.toymoban.com/news/detail-676637.html
<template>
<view class="form1box u-f">
<image src="@/static/img/fanhui.png" mode="" class="u-w-25.86 u-h-25.86 u-m-r-21" @click="leftClick"></image>
<view class="content">
<video id="myVideo"
class="u-w-460"
:style="{'height':winheight+'px'}"
autoplay
:src="videosrc"
object-fit='cover'
:controls='true'
:show-fullscreen-btn='false'
:show-center-play-btn='false'
:show-play-btn='false'
@ended='endedFun'
></video>
</view>
<view class="operate u-m-l-12" >
<view class="u-flex" @click="zhFun">
<image src="@/static/img/sw1.png" mode="" class="u-w-36.95 u-h-19.4 u-m-r-21.71" v-if="isZH"></image>
<image src="@/static/img/sw.png" mode="" class="u-w-36.95 u-h-19.4 u-m-r-21.71" v-else></image>
<text>添加中文朗读</text>
</view>
<view class="u-flex" @click="sjFun">
<image src="@/static/img/suiji.png" mode="" class="u-w-36.48 u-h-36.48 u-m-r-21.24" v-if="issj"></image>
<image src="@/static/img/zan1.png" mode="" class="u-w-36.48 u-h-36.48 u-m-r-21.24" v-else></image>
<text> {{issj?'随机播放':'暂停'}}</text>
</view>
<view class="u-flex" @click="bofangFun">
<image src="@/static/img/you.png" mode="" class="u-w-36.48 u-h-36.48 u-m-r-21.24" v-if="isbofang"></image>
<image src="@/static/img/zan1.png" mode="" class="u-w-36.48 u-h-36.48 u-m-r-21.24" v-else></image>
<text>{{isbofang?'自动播放':'暂停'}}</text>
</view>
<view class="bigbox">
<view class="scrollbox" v-if="suduShow">
<view
v-for="(item,i) in suduList" :key="i"
class="u-m-b-10"
:class="item.choose ? 'ac' :''"
@click="suduFun(i)"
>{{item.name}}X</view>
</view>
<view @click="suduShow=!suduShow" class="u-flex">
<view class="sudu u-w-36.95 u-m-r-21.71">{{sudu}}</view>
<text>播放速度</text>
</view>
</view>
<view class="bigbox">
<view class="scrollbox" v-if="scrollShow">
<view
v-for="(item,i) in timeList" :key="i"
class="u-m-b-10"
:class="item.choose ? 'ac' :''"
@click="timeFun(i)"
>{{item.time}}s</view>
</view>
<view @click="scrollShow=!scrollShow" class="u-flex">
<view class="sudu u-w-36.95 u-m-r-21.71">{{time}}s</view>
<text>间隔距离</text>
</view>
</view>
</view>
</view>
</template>
<script>
// import {
// xxx
// } from "@/api/index/index.js"
export default {
components: {},
data() {
return {
winheight:0,
videosrc:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4', // 视频
scrollShow:false, // 时间间隔默认不显示false
timeList:[
{choose:false,time:'1.0'},
{choose:false,time:'1.5'},
{choose:false,time:'2.0'},
{choose:true,time:'2.5'},
{choose:false,time:'3.0'},
{choose:false,time:'3.5'},
{choose:false,time:'4.0'},
{choose:false,time:'4.5'},
{choose:false,time:'5.0'},
],
time:'2.5' ,// 时间间隔 默认2.5s
suduShow:false, // 播放速度默认不显示false
suduList:[
{choose:false,name:'0.25'},
{choose:false,name:'0.5'},
{choose:false,name:'0.75'},
{choose:true,name:'1.0'},
{choose:false,name:'1.25'},
{choose:false,name:'1.5'},
{choose:false,name:'1.75'},
{choose:false,name:'2.0'},
{choose:false,name:'2.5'},
],
sudu:'1.0' ,//播放速度 默认1.0X
isZH:false, // 是否中文朗读 默认false否
issj:true, // 是否随机播放 默认true是
isbofang:true, // 是否自动播放 默认true是
}
},
onLoad(option) {
let that = this;
uni.getSystemInfo({
success: function (res) {
that.winheight = res.windowHeight - 80;
}
});
this.videoContext = uni.createVideoContext("myVideo", this);
this.$nextTick(() => {
this.videoContext.play();
});
},
methods: {
// 选中 时间间隔，自动默认循环和开始播放
timeFun(i){
this.suduShow = false; // 速度false
this.timeList.forEach((item,index) => {
if(i == index){
item.choose = true;
this.time = item.time;
this.scrollShow = false;
} else {
item.choose = false;
}
});
},
// 选中 速度
suduFun(i){
this.scrollShow = false; // 时间false
this.suduList.forEach((item,index) => {
if(i == index){
item.choose = true;
this.sudu = item.name;
this.suduShow = false;
// 播放速度
this.videoContext.playbackRate(Number(item.name))
} else {
item.choose = false;
}
});
},
// 当播放到末尾时触发 ended 事件，先暂停再延迟多长时间重新播放
endedFun(){
let that = this;
let a = Number(this.time)*1000;
this.$nextTick(() => {
this.videoContext.pause();
});
setTimeout(function() {
console.log('延迟时间开始播放新的视频',a);
// that.videoContext.play();
}, a);
},
leftClick(){
uni.navigateBack();
},
// 中文朗读
zhFun(){
this.isZH = !this.isZH;
},
// 随机播放
sjFun(){
this.issj = !this.issj;
},
// 播放或暂停
bofangFun(){
this.isbofang = !this.isbofang;
if(this.isbofang){
console.log('播放');
this.$nextTick(() => {
this.videoContext.play();
});
} else {
console.log('暂停');
this.$nextTick(() => {
this.videoContext.pause();
});
}
},
},
}
</script>
<style lang='scss' scoped>
.form1box{
padding: 40rpx 16rpx 7rpx 40rpx;
box-sizing: border-box;
height: 100vh;
.operate{
box-sizing: border-box;
display: flex;
justify-content: space-around;
flex-direction: column;
color: #000000;
font-size: 12rpx;
font-family: MicrosoftYaHei;
padding: 20rpx 0;
.sudu{
color: #B0B0B0;
font-family: Adobe Heiti Std R;
}
.bigbox{
position: relative;
}
.scrollbox{
box-sizing: border-box;
position: absolute;
/* top: -250rpx; */
bottom:20rpx;
left: 0rpx;
background-color: #fff;
width: 148rpx;
height: 170rpx;
overflow: auto;
border: 1rpx solid #000000;
color:#B0B0B0;
font-size: 12rpx;
font-family: MicrosoftYaHei;
padding: 9rpx 12rpx;
.ac{
color: #000000;
}
}
}
}
</style>
文章来源：https://www.toymoban.com/news/detail-676637.html
到了这里，关于【视频】横屏播放，uniapp，微信小程序，可选择播放速度，暂停和继续播放的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![微信小程序 video 组件[播新视频旧视频暂停，再次播放延续上次播放时长]](https://imgs.yssmx.com/Uploads/2024/02/825983-1.png)
