十年潍坊网站建设经验,服务客户千余家。专业潍坊网站设计公司潍坊网站制作公司关于我们 | 客户服务欢迎来到潍坊网站建设公司骏马网络!
年轻,更要脱颖而出
对于网站建设,我们有活力,有态度
我们的优势: 专业网络公司,顶尖设计师量身定制 配备阿里云主机,BGP多线,高速访问 99.999%网站数据可靠性 免费提供快速ICP备案 承诺24小时快速解决网站问题

CSS2 video点击中间播放按钮播放视频代码

更新时间:2020-08-26 23:03   已阅读: 次 |  作者:骏马网络  来源:潍坊做网站

自定义图片(背景不是poster)。覆盖到视频上,然后点击这个可以 播放。

HTML部分:


<div class="video-box" >
      <video id="video" autoplay="autoplay" controls="controls" style="width:100%;">
          <source src="http://lkl.pos9.cn/zb_users/theme/songco_v1/style/img/111.mp4" type="video/mp4">
          Your browser does not support the video tag.
      </video>
      <div class="video-img"></div>
  </div>

CSS部分:


.video-box{
	position: relative;
}
.video-box video{
	display: inline-block;
  vertical-align: baseline;
}
.video-box .video-img{
	position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: 999;
    background: url(/web/pic/v.jpg) no-repeat;
    background-size: 100% 100%;
		cursor:pointer
}

JS控制部分:

<script type="text/javascript">
	$(".video-img").click(function(){
		$(this).hide();
		$("#video")[0].play();
	})
</script>

文章引用:http://www.wfwz.net/news/241.html如需转载,请注明出处。

相关文章:
最新文章:
  • pbootcms如何升级到最新模板如何做好防护
  • 工信部要求开展App备案,2024年4月前完成 工信部的APP备案终于来了
  • Think PHP3.2.3 update(blind)注入漏洞修复
  • 高德api开发IP定位定位ip判断当前城市地址
  • Linux VPS 挂载第二块磁盘教程
  • eyoucms二次开发易优compare 比较大小小于等于标签
  • 随机文章:
  • 互联网信息办公室调研组来潍坊调研
  • 宝塔专业版2019Linux终身授权300元/个(原价1388元)
  • 7月8号淘宝一淘屏蔽商品链接搜索
  • 如何判断一个网站优化做的好不好?
  • 潍坊企业网站改版(新版)如何将改版损失降到
  • 潍坊商标注册申请的流程是什么?
  • 百度通报17起内部违纪案件-包括篡改排名
  • 大数据告诉你高考状元一般来自什么样的家庭
  • 织梦dede文章页面调用当前栏目的图片二次开发
  • 网站友情链接的作用有多大?
  • CSS2 video点击中间播放按钮播放视频代码
  • 2016年7月以后医疗网站优化总结
  • 企业做网站前需要准备那些资料?
  • Think PHP3.2.3 update(blind)注入漏洞修复
  • 怎样选择利于排名的虚拟空间服务器
  • 潍坊营销型企业网站该怎么做?
  • 潍坊seo骏马网络助推中小企业成长
  • 潍坊建一个网站需要多少钱费用?
  • Linux VPS 挂载第二块磁盘教程
  • 《百度搜索引擎网页质量白皮书》完整版正式上
  • 潍坊网站推广做好品牌故事是最好的软广告
  • 微商高手都做到了这三招
  • 【zac大咖】做SEO网站优化多久才能看到效果?
  • 揭穿微信朋友圈卖东西月入几万的真相
  • 通用的SEO关键词优化方案
  • 网站被降权了怎么办?
  • 阿里宣布淘宝天猫全面融合我们应该思考什么
  • 较短的时间里让新站够获得百度排名
  • 通知:阿里云备案核查电话为95187一定要接听
  • 中小型企业为什么一定要制作建设网站
  • 中国巴西元首出席百度巴西葡语搜索引擎启动
  • 点击自动复制文本代码
  • PHP带权重的随机跳转源码直接运行无错版2秒跳转
  • 百度首页改版新首页极致至简
  • 推广包年骗局—百度竞价包年操作详解(揭秘)
  • eyoucms如何判断第一条和最后一条数据
  • 织梦后台前台空白页怎么办dedecms开启报错调试
  • 如何分析网站用户需求做好网站优化
  • 华帝的套路法国队夺冠 退全款却赚的盆满钵满
  • 什么是冰桶算法?百度移动搜索冰桶算法升级公
  • 思维分析:如何通过出“租手机”这个小项目年
  • “闪电算法”上线了速度决定排名
  • 王思聪新浪微博抽奖113人每人1万
  • 动态的关键词搜索织梦标签调用相关关键词的文章
  • 京东下乡潍坊刷墙:发家致富靠劳动,勤俭持家
  • 网站被K之后快速恢复技巧
  • 姚振华万科野蛮人的前世今生
  • SWOT、PDCA、6W2H、SMART、WBS、时间管理
  • 潍坊企业网站维护主要是做哪些大约什么价格
  • 网站建设内部页面如何正确的微调?
  • 常用的织梦调用时间标签详细介绍
  • 潍坊网站优化如何做网站用户的体验
  • 整改反馈功能上线:首批通知石榴算法命中站点
  • 内容为王!百度搜索发布优质内容生产指南
  • 最全的网站推广优化教程100条汇总
  • 王宝强的成功-Smart五大原则分析
  • 网站到底要不要用CDN?
  • htaccess重写如何二级目录变二级域名
  • pbootcms如何升级到最新模板如何做好防护
  • 榆林产妇坠楼身亡【真相】 家属医院各执一词
  • 突然网站百度排名下降怎么恢复?
  • 如何建设一个自己的博客网站?
  • 网站优化的三大难题架构内容外链
  • DEDECMS织梦自定义表单ajax判断提交不跳转处理
  • linux宝塔专业版优惠券体验活动1元0.99元永久最高减2000
  • 工信部要求开展App备案,2024年4月前完成 工信部的APP备案终于来了
  • 2014互联网大会8月26在北京国际会议中心举行
  • 建议让百度蜘蛛自行决定抓取频次
  • SEO经典口诀及解析
  • 做什么样的网站能够给您带来生意?
  • 织梦留言自定义表单提交之后发送到邮箱(亲测
  • 企业做网站建设哪家好【受益匪浅】
  • 百度的蜘蛛的抓取时间和收录时间
  • 高德api开发IP定位定位ip判断当前城市地址
  • js代码百度商桥对话框点击自定义按钮弹出
  • 双11宝塔专业版授权组队活动开始啦~欢迎上车
  • 为什么要做手机移动网站?
  • 企业网站如何在百度上获得好的排名
  • 什么是MIP站点快速改造一个MIP站点(入门篇)
  • DEDE织梦留言自定表单自动发送邮件到阿里云企业邮箱
  • 阿里云服务器系统盘容量扩容给/磁盘扩容不关机扩展
  • 潍坊说-早里地时候-【原创视频推荐】
  • 潍坊网站建设做个网站要花多少钱?
  • 青州营销型企业网站建设的几个常见错误
  • 专访李彦宏:技术创新是中韩互联网的共同话题
  • 如何写好一篇好的网站优化软文
  • 重要信息-百度搜索网页标题规范-赶紧改改自己的
  • 7个有助于优化的网站文章编辑技巧
  • 潍坊市人民政府办公室关于试鸣防空防灾警报的
  • 为什么我的网站优化效果不是很好
  • eyoucms二次开发易优compare 比较大小小于等于标签
  • 戏说格力空调不涨价是董明珠新谎言
  • dedecms织梦增加栏目缩略图、栏目图片功能的方法
  • 网站优化的详细方案步骤【优化必须做的】
  • 网站编辑如何做好网站优化
  • SEO能做到什么时候?
  • 谷歌投资5亿美元 欲将当日达业务拓展到全美
  • 链接抓取模型百度蜘蛛抓取反馈时间多久合适
  • 八月万网阿里云服务器优惠券续费代金券1000元
  • 潍坊网站建设
    潍坊网站优化
    潍坊网站制作
    潍坊网站建设
    返回顶部