零基础学做网站培训介绍

当前位置:

怎么在网站上VIDEO视频前插入15秒视频广告(带倒计时、关闭功能)

有些学员学习了学做网站论坛的电影网站课程之后,制作了自己的电影网站。想在视频播放前插入自己的广告宣传视频,就是优酷等大型视频网站一样,看视频正片之前,需要先观看广告才可以。效果如下图:

VIDEO视频前插入15秒视频广告

怎么在自己的视频网站上制作这样的功能呢?在视频前插入15秒视频广告,并且带倒计时、关闭功能呢?下面学做网站论坛将介绍这种功能的制作方法。

在视频前插入15秒视频广告需要用到以下的知识:

  • CSS定位
  • JQUERY控制视频
  • VIDEO播放

方法/步骤

第一步:在自己视频播放器代码上面,加上以下的广告视频播放框,使用VIDEO标签播放,并且设置为自动播放;


<div class="video-ad">
<div class="video-time"><span id="v-tgad">跳过此广告</span><span id="v-djs">15 秒</span></div>
<video autoplay="autoplay" id="Video_play">
<source src="广告视频地址" type="video/mp4" />
您的浏览器不支持VIDEO
</video>
<span id="bfbtn"></span>
</div>

第二步:通过CSS控制广告播放框的定位,让广告播放框的位置覆盖原视频播放框,这样,就需要先看完广告后,才能看正片视频了。


.video-time{position:absolute;right:10px;top:10px;z-index:200;}
.video-time span{display:inline-block;height:24px;line-height:24px;color:#f5f5f5;padding:0px 15px;font-size:14px;margin-left:10px;background:#e1dddd85;border-radius:14px;}
#v-tgad{cursor:pointer;display:none;}
.playboxnotice{display:none;}
#Video_play{width:100%;height:100%;background:#000;}

第三步:就是通过JQUERY来监控视频播放状态了,并且显示视频播放完成倒计时。以前当视频播放到5秒后,显示“关闭此广告”按钮;


//使用事件监听方式捕捉事件
videodz.addEventListener("timeupdate",function(){
//用秒数来显示当前播放进度
var timeDisplay = Math.floor(videodz.currentTime);
$("#bfbtn").hide();
$("#v-djs").text((15-timeDisplay)+' 秒');
//以秒为单位 2*60 两分钟
if(timeDisplay>5){
//视频暂停操作
//video.pause()
//手机端视频全屏展示关闭
//this.webkitExitFullScreen();
//去除视频地址src内容
//video.setAttribute("src","");
//将视频隐藏掉
//video.style.display="none";
//提示层显示
$("#v-tgad").show("slow");
}
},false);

由于篇幅限制,JS未全部展现。可以下载VIDEO视频前插入15秒视频广告实例来查看。

通过JQUERY+VIDEO+CSS就可以实现在视频播放前播放自己的广告视频,并且可以播放5秒后,用户可自行关闭广告,以及播放倒计时功能。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 我们在建网站过程中,经常需要用到网站搬家,网站更换服务器等操作,通常的做法就是将旧服务器里的网站文件和数据包下载下来,然后到新服务器里上传重
  • 在之前的教程中,我们介绍了怎么将自己的WORDPRESS网站同步成百度小程序,通过一个wordpress 百度小程序同步插件就可以轻松做到。但是有些rzxqj的人不
  • WordPress程序里的某个PHP文件,如果想连接数据库,一般需要填写数据库名、数据库用户、密码等信息,如下:<?php$conn=mysqli_connect(&qu
  • 我们在做网站过程中,有时需要制作单选内容,让用户选择想看的内容,通过单选按钮来进行切换。这时就需要用到jquery控制radio单选切换不同的内容。实
  • 如何将一个普通二维数组转换成多维数组,可以通过FOR循环进行转换。例如,一个普通数组:$ziduannamearr= array('风格','面积','尺寸');
  • 在制作手机网站时,网站导航有时会有二级菜单,当某个栏目有二级菜单时,点击父超链接不跳转,只展开/收缩二级菜单。默认情况下,只要我们点击了超链
  • PHP 数组去重PHP数组里如果有重复的值,想去除重复的值,可以使用PHP 数组去重函数array_unique。array_unique() 函数用于移除数组中重复的值。如果
  • 我们在自己做网站时,经常会使用到FORM表单,在FORM表单中为了防止别人频繁提交,常常会在表单里添加验证码。如下图:下面学做网站论坛介绍一下如何
  • 一个网站上会有很多图片,在网站排版过程中,需要设置图片居中显示。通过CSS控制图片居中显示,包括水平居中与垂直居中。图片的水平居中图片的水平
  • 在网站开发过程中,我们有时需要直接从数据库里读取数据,并且将数据进行相关的判断。我们读取数据库的常用方法就是直接使用PHP来读取。今天给大家介