点击视频播放切换隐藏--添加播放图片按钮

简介: 点击视频播放切换隐藏--添加播放图片按钮
<img src="../images/bofangqi.png" alt="" class="btn-video" />  <!-- 视频上定位播放按钮 -->
<video style="width:550px;height:324px;" controls autoplay poster="../images/a3.jpg" id="video">  <!-- poster="../images/a3.jpg" 视频封面图 -->
    <source src="../images/movie.ogg" type="video/ogg">
    <source src="../images/movie.mp4" type="video/mp4">
    <source src="../images/movie.webm" type="video/webm">
    <object data="../images/movie.mp4" width="320" height="240">
      <embed width="320" height="240" src="movie.swf">
  </object>
</video>
<script>
  $(function(){
    // 点击图片播放
    let video = $('#video').get(0);
    $('.btn-video').click(function(){   // 点击视频添加的播放图片按钮
        video.play();                          // 视频播放
        $(this).stop().hide();              //当前视频添加的播放图片按钮隐藏
    });
    setInterval(function(){
      if (video.paused) {              //如果视频停止播放====(paused查看视频是否已暂停)
        $('.btn-video').stop().show();    //当前视频添加的播放图片按钮隐藏
      };
    },500);
  });
</script>
相关文章
|
小程序 JavaScript
小程序本地相册选择图片或相机拍照底部弹框功能
小程序本地相册选择图片或相机拍照底部弹框功能
93 0
|
iOS开发
iOS MFMessageComposeViewController不显示取消按钮,导航条上白色,无取消按钮,无法返回应用...
iOS MFMessageComposeViewController不显示取消按钮,导航条上白色,无取消按钮,无法返回应用...
65 0
|
6月前
|
Shell 开发工具 git
聊天功能演示系统发布后出现有些页面滚动与鼠标点击问题解决
聊天功能演示系统发布后出现有些页面滚动与鼠标点击问题解决
43 0
|
6月前
|
JavaScript 容器
富文本的图片添加点击放大功能
思路:富文本加载后,dom出全部img元素,然后各自单独添加点击事件
256 3
|
6月前
|
XML 计算机视觉 数据格式
手机点击按钮进行切换图片
手机点击按钮进行切换图片
35 0
|
前端开发
上传图片组件的悬停显示删除等操作遮罩层
上传图片组件的悬停显示删除等操作遮罩层
|
前端开发 容器
使用resize实现强大的图片拖拽切换预览功能
本文将介绍一个非常有意思的功能,使用纯 CSS 利用 resize 实现强大的图片切换预览功能。类似于这样:
PS实用技巧:用原始图片制作显示(正常状态)、鼠标悬浮(hover)、鼠标点击(pressed)的方法
PS实用技巧:用原始图片制作显示(正常状态)、鼠标悬浮(hover)、鼠标点击(pressed)的方法
PS实用技巧:用原始图片制作显示(正常状态)、鼠标悬浮(hover)、鼠标点击(pressed)的方法
video 预览图 -去掉下载和全屏按钮
谷歌浏览器版本是54.0-57.0之间,并且也出现了视频右下角有按钮的情况都可以使用下面的代码。
322 0
video 预览图 -去掉下载和全屏按钮