文章來源地址http://www.zghlxwxcb.cn/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?'隨機(jī)播放':'暫停'}}</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?'自動(dòng)播放':'暫停'}}</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, // 時(shí)間間隔默認(rèn)不顯示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' ,// 時(shí)間間隔 默認(rèn)2.5s
				
				suduShow:false, // 播放速度默認(rèn)不顯示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' ,//播放速度 默認(rèn)1.0X
				
				isZH:false, // 是否中文朗讀 默認(rèn)false否
				issj:true, // 是否隨機(jī)播放 默認(rèn)true是
				isbofang:true, // 是否自動(dòng)播放 默認(rèn)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: {
			// 選中 時(shí)間間隔，自動(dòng)默認(rèn)循環(huán)和開始播放
			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; // 時(shí)間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;
						}
				});
			},
			//  當(dāng)播放到末尾時(shí)觸發(fā) ended 事件，先暫停再延遲多長時(shí)間重新播放
			endedFun(){
				let that = this;
				let a = Number(this.time)*1000;
				
				this.$nextTick(() => {
					this.videoContext.pause();
				});
				
				setTimeout(function() {
						console.log('延遲時(shí)間開始播放新的視頻',a);
						// that.videoContext.play();
				}, a);
			},
			
			leftClick(){
				uni.navigateBack();
			},
			// 中文朗讀
			zhFun(){
				this.isZH = !this.isZH;
			},
			// 隨機(jī)播放
			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>

到了這里，關(guān)于【視頻】橫屏播放，uniapp，微信小程序，可選擇播放速度，暫停和繼續(xù)播放的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！