Jquery解决视频播放过程中定时弹出确认窗口

最新推荐文章于 2022-06-13 14:08:08 发布

山中水蓝

最新推荐文章于 2022-06-13 14:08:08 发布

阅读量1.7k

点赞数 1

分类专栏： JQuery 文章标签： javascript jquery

本文链接：https://blog.csdn.net/Garnett_zk/article/details/109448093

版权

JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Jquery解决视频播放过程中定时弹出确认窗口

前言
一、目标
二、实现目标
总结

前言

本系列文章主要记录项目过程中重点的项目技术

一、目标

因为业务的需要，我们需要在视频正常播放的过程中，间隔的弹出确认窗口，从而避免用户刷视频，实现的效果如下
在这里插入图片描述

二、实现目标

1.通过video标签，播放视频

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="content-type" content="text/html; charset=UTF-8">
  <title>Document</title>
</head>
<body>
<button class="gonext"> 播放</button>
<button class="gonext1"> 暂停</button>
<button class="getTime">获取总时长<span></span></button>
  <video webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" id="video" src="ringVideo.mp4" onended="myFunction()"></video>
  <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>

2.编写播放、暂停等函数

调用getConfig()方法通过属性名获得属性值

  var lable = false;
  //当前时间
  var currentTime = 0;
  //总时长
  var  duration = 0; 
  // 音频播放结束
    function myFunction(){  
      setTimeout(function(){
        console.log("videoTime")
      },0);
    }
    $(function(){
      // 播放
      $(".gonext").click(function(){
		lable = true;
        $("video")[0].play();
		setTimeout(videoPopupWindow,10000);//这里设置的是3秒后触发事件
      })
      // 暂停
      $(".gonext1").click(function(){
		lable = false;
        $("video")[0].pause();
      })
      // 音频播放结束事件
      /*$("video").on('ended', function() {
        setTimeout(function(){
          console.log("videoTime")
        },0);
      })*/
      //获取视频的总时长
      $(".getTime").click(function(){
        var videoTime=Math.floor($("video")[0].duration); 
        console.log(videoTime)
      })
    })

3.获得当前时间和总时长

	$(document).ready(function(){	
	  $("#video").on(
		"timeupdate", 
		function(event){
		  currentTime = this.currentTime;
		  duration = this.duration;
		});
	});

4.添加弹窗事件

//视频广告弹窗
	function videoPopupWindow(){
		//判断函数执行的时候是否被暂停了
		if(lable){
			//暂停播放
			$("video")[0].pause();
			var person=prompt("请输入字符XIAOMING","Harry Potter");
			if (person!=null && person!=""){
				if(person=="XIAOMING"){
				$("video")[0].play();
				//判断距离结束的时间是否超过定时间隔
				if(duration - currentTime >= 10){
					setTimeout(videoPopupWindow,10000);//这里设置的是3秒后触发事件
					console.log(11);
					}
					
				}else{
					alert("输入的字符不对，请重新输入");
					videoPopupWindow();
				}
			}else{
				alert("不能为空");
				videoPopupWindow();
			}
		}
		
		
	}

5.完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="content-type" content="text/html; charset=UTF-8">
  <title>Document</title>
</head>
<body>
<button class="gonext"> 播放</button>
<button class="gonext1"> 暂停</button>
<button class="getTime">获取总时长<span></span></button>
  <video webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" id="video" src="ringVideo.mp4" onended="myFunction()"></video>
  <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript">
  var lable = false;
  //当前时间
  var currentTime = 0;
  //总时长
  var  duration = 0; 
  // 音频播放结束
    function myFunction(){  
      setTimeout(function(){
        console.log("videoTime")
      },0);
    }
    $(function(){
      // 播放
      $(".gonext").click(function(){
		lable = true;
        $("video")[0].play();
		setTimeout(videoPopupWindow,10000);//这里设置的是3秒后触发事件
      })
      // 暂停
      $(".gonext1").click(function(){
		lable = false;
        $("video")[0].pause();
      })
      // 音频播放结束事件
      /*$("video").on('ended', function() {
        setTimeout(function(){
          console.log("videoTime")
        },0);
      })*/
      //获取视频的总时长
      $(".getTime").click(function(){
        var videoTime=Math.floor($("video")[0].duration); 
        console.log(videoTime)
      })
    })
	
	$(document).ready(function(){
			
	  $("#video").on(
		"timeupdate", 
		function(event){
		  currentTime = this.currentTime;
		  duration = this.duration;
		});
	});
	
	//视频广告弹窗
	function videoPopupWindow(){
		//判断函数执行的时候是否被暂停了
		if(lable){
			//暂停播放
			$("video")[0].pause();
			var person=prompt("请输入字符XIAOMING","Harry Potter");
			if (person!=null && person!=""){
				if(person=="XIAOMING"){
				$("video")[0].play();
				//判断距离结束的时间是否超过定时间隔
				if(duration - currentTime >= 10){
					setTimeout(videoPopupWindow,10000);//这里设置的是3秒后触发事件
					console.log(11);
					}
					
				}else{
					alert("输入的字符不对，请重新输入");
					videoPopupWindow();
				}
			}else{
				alert("不能为空");
				videoPopupWindow();
			}
		}
		
		
	}
  </script>
</body>
</html>

总结

至此，本文章结束

山中水蓝

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
Jquery解决视频播放过程中定时弹出确认窗口

Jquery解决视频播放过程中定时弹出确认窗口前言一、目标二、实现目标1.通过video标签，播放视频2.编写播放、暂停等函数3.获得当前时间和总时长4.添加弹窗事件5.完整代码总结前言本系列文章主要记录项目过程中重点的项目技术一、目标因为业务的需要，我们需要在视频正常播放的过程中，间隔的弹出确认窗口，从而避免用户刷视频，实现的效果如下二、实现目标1.通过video标签，播放视频<!DOCTYPE html><html lang="en"><head&
复制链接

扫一扫

专栏目录