JS控制视频播放或暂停

<template>
	<view>
		<view class="page-body">
			<view class="page-section">
				<video id="myVideo" src="src" @error="videoErrorCallback"  object-fit="cover"  ref="myvideo"></video>
				 <view class="" style="padding-top: 50rpx;">
					<button type="default" @click="bofang()">播放</button>
				</view>
				<view class="" style="padding-top: 50rpx;">
					<button type="default" @click="tingzhi()">停止</button>
				</view> 
			</view>
			
			
			
			
		</view>
	</view>
</template>


<script>
	
	export default {
		data() {
			return {
				title: 'video',
				src: '/static/01.mp4',
				
				
			}
		},
		onShow() {
		     
		},
		onReady: function (res) {
			this.videoContext = uni.createVideoContext('myVideo')
			
			
		},
		
		methods: {
			bofang(){
				console.log('播放');
				this.videoContext.play();
				
				
				
			},	
			tingzhi(){
				console.log('停止');
				this.videoContext.stop();
			},
			videoErrorCallback: function (e) {
				console.log('视频错误信息:')
				console.log(e.target.errMsg)
			},
		}
	}

</script>

<style>
	
	.page-section{
	    width: 100%;
	    height:500rpx;
	   
	    
	}
	
	.page-section video{
	     width: 100%;
	     height: 100%; 
	     object-fit: cover;
	}
	
</style>

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 可以使用以下代码实现h5 xgPlay js控制播放暂停功能: var video = document.getElementById("myVideo"); function playPause() { if (video.paused) { video.play(); } else { video.pause(); } } document.getElementById("playBtn").addEventListener("click", playPause); ### 回答2: 以下是一个使用H5和JavaScript控制播放暂停功能的代码示例: ```html <!DOCTYPE html> <html> <head> <title>H5 xgPlay控制播放暂停</title> </head> <body> <video id="myVideo" controls width="400"> <source src="video.mp4" type="video/mp4"> </video> <button onclick="togglePlay()">播放/暂停</button> <script> const video = document.getElementById('myVideo'); function togglePlay() { if (video.paused) { video.play(); } else { video.pause(); } } </script> </body> </html> ``` 这段代码创建了一个视频元素和一个按钮。通过调用`togglePlay()`函数,我们可以在播放暂停之间切换视频的状态。其中,`getElementById()`方法用于获取视频元素,`paused`属性用于判断视频是否暂停,`play()`和`pause()`方法用于播放暂停视频。在`<script>`标签中的JavaScript代码将在页面加载时执行。 请注意,这只是一个简单的示例,具体实现可能因浏览器或播放器而异。你可以根据你的需求和项目要求进行适当的修改。 ### 回答3: 要实现H5 xgPlay的js控制播放暂停功能,可以通过以下代码实现: 1. 首先,我们需要在HTML文件中引入xgPlay的播放器,以及一个按钮元素用于触发播放暂停功能。可以在 head 标签中添加以下代码: ``` <head> <script src="http://path/to/xgplay.js"></script> </head> ``` (注:http://path/to/xgplay.js需要替换为真实的xgPlay播放器的路径) 2. 接下来,在 body 标签中添加一个按钮元素和一个div元素,用于显示播放器的界面和控制按钮的点击事件。可以在 body 标签中添加以下代码: ``` <body> <div id="xgplayer"></div> <button id="playpause">播放/暂停</button> <script> // 创建播放器实例 var player = new xgPlayer('xgplayer', { url: 'http://path/to/video.mp4', // 播放视频地址,需要替换为真实的视频url fluid: true // 开启自适应布局 }); // 获取按钮元素 var playpauseBtn = document.getElementById('playpause'); // 绑定按钮点击事件 playpauseBtn.addEventListener('click', function() { if (player.paused) { player.play(); // 如果当前是暂停状态,则播放视频 } else { player.pause(); // 如果当前是播放状态,则暂停视频 } }); </script> </body> ``` (注:http://path/to/video.mp4需要替换为真实的视频地址) 以上代码中,首先创建了一个xgPlayer实例,通过传入要播放视频地址和其他参数来初始化播放器。然后,获取按钮元素,并通过addEventListener方法绑定了按钮的点击事件。在点击事件回调函数中,判断当前播放器的状态,如果是暂停状态则调用play方法播放视频,如果是播放状态则调用pause方法暂停视频。 通过以上代码,就可以实现通过JavaScript控制H5 xgPlay播放器的播放暂停功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值