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

简介: 点击视频播放切换隐藏--添加播放图片按钮
<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>
相关文章
|
5月前
|
小程序 JavaScript
小程序本地相册选择图片或相机拍照底部弹框功能
小程序本地相册选择图片或相机拍照底部弹框功能
59 0
|
7月前
|
iOS开发
iOS MFMessageComposeViewController不显示取消按钮,导航条上白色,无取消按钮,无法返回应用...
iOS MFMessageComposeViewController不显示取消按钮,导航条上白色,无取消按钮,无法返回应用...
28 0
|
25天前
|
XML 计算机视觉 数据格式
手机点击按钮进行切换图片
手机点击按钮进行切换图片
12 0
|
1月前
|
JavaScript 容器
富文本的图片添加点击放大功能
思路:富文本加载后,dom出全部img元素,然后各自单独添加点击事件
48 3
uniapp上传预览大图-带删除按钮-摄像机-相册
uniapp上传预览大图-带删除按钮-摄像机-相册
|
8月前
|
前端开发
上传图片组件的悬停显示删除等操作遮罩层
上传图片组件的悬停显示删除等操作遮罩层
|
11月前
|
前端开发 容器
使用resize实现强大的图片拖拽切换预览功能
本文将介绍一个非常有意思的功能,使用纯 CSS 利用 resize 实现强大的图片切换预览功能。类似于这样:
PS实用技巧:用原始图片制作显示(正常状态)、鼠标悬浮(hover)、鼠标点击(pressed)的方法
PS实用技巧:用原始图片制作显示(正常状态)、鼠标悬浮(hover)、鼠标点击(pressed)的方法
PS实用技巧:用原始图片制作显示(正常状态)、鼠标悬浮(hover)、鼠标点击(pressed)的方法
video 预览图 -去掉下载和全屏按钮
谷歌浏览器版本是54.0-57.0之间,并且也出现了视频右下角有按钮的情况都可以使用下面的代码。
257 0
video 预览图 -去掉下载和全屏按钮
|
编解码
根据用户浏览页面的设备和屏幕的分辨率,在页面上显示不同的页面和不同大小的图片
根据用户浏览页面的设备和屏幕的分辨率,在页面上显示不同的页面和不同大小的图片
109 0
根据用户浏览页面的设备和屏幕的分辨率,在页面上显示不同的页面和不同大小的图片