新闻中心 网络推广 技术文档

jq控制视频播放和暂停以及声音

时间:2023-06-19   来源:本站

在网站开发的过程中,我们常常需要添加一些视频来让网站内容更加丰富,比如说网页中有一个按钮,点击按钮后,视频弹到浮层中打开并播放,再加一个按钮,点击关闭这个视频,我们在实际应用中这会遇到这样的问题,关闭了按钮,声音依旧在,所以我们可以使用以下的方式来关闭声音。

 $("video").prop('muted', true);

但是如果使用这样关闭声音,但是视频其实还是在一直播放。所以我们需要使用

 $("video").trigger('play');

这样的代码来实现播放和关闭的效果。


完整的代码如:

<script>
$("#tcclick").click(function(){  //点击按钮
     $("#quote").css("display","block");   //点击按钮时显示播放的DIV层
     $("#myVideo").trigger('play');  //点击按钮时视频播放
       
  });  
$("#closetc").click(function(){  //点击关闭按钮
      $("#quote").css("display","none");   //点击按钮时隐藏视视频播放的DIV层
      $("#myVideo").trigger('pause');   //点击按钮时暂停视频播放
  }); 
</script>


新闻推荐
龙华网站建设多少钱?
龙华网站建设多少钱?

大家好,这里是黑马视觉,今天我们来聊聊在深圳建一个网站需要多少钱?龙华网站建设需要多少钱?从所周知,...

龙华外贸网站建设必需知道的四大注意事项
龙华外贸网站建设必需知道的四大注意事项

在深圳有很多外贸公司,他们已经不满足于通过其他平台来引流,于是他们都需要建设一个自己自己的外贸网站,...

jq实现鼠标往下滚动页面,导航消失,往上滚动页面,导航显示。
jq实现鼠标往下滚动页面,导航消失,往上滚动页面,导航显示。

如何用JQ实现:鼠标往下滚动页面,导航消失,往上滚动页面,导航显示。废话不多说,直接上代码:<script...

解决HTML5的video视频标签不自动播放JS方法
解决HTML5的video视频标签不自动播放JS方法

先说问题:在做一个网站的时候,在电脑上测试视频可正常的自动播放,用谷歌浏览器的模拟器测试移动端也可以...

Top