javascript - 使用 jquery 函数播放或暂停视频

标签 javascript jquery html css

<分区>

我尝试在使用 jquery 和 javascript 单击按钮时播放或暂停视频。当我尝试使用 javascript 函数时，它无法正常工作并且控制台显示 paused 关键字不是函数。我在下面给出代码。 

var myVideo = $(".videoo:visible");
function playPause() { 
  window.alert(myVideo);
  if (myVideo.paused) 
    myVideo.play(); 
  else 
    myVideo.pause(); 
}

最佳答案

试试这个。

$(document).ready(function() {
  var video1 = document.getElementById("ban_video");
  video1.currentTime = 0;
  $(".mute-bt").click(function() {
    if ($(this).hasClass("stop")) {
      var ban_video = document.getElementById("ban_video");
      $("#ban_video").prop('muted', false);
      $(this).removeClass("stop");
    } else {
      var ban_video = document.getElementById("ban_video");
      $("#ban_video").prop('muted', true);
      $(this).addClass("stop");
    }
  });

  $(".play-bt").click(function() {
    $(".play-bt").hide();
    $(".pause-bt").show();
    var ban_video = document.getElementById("ban_video");
    if ($(".stop-bt").hasClass("active")) {
      ban_video.currentTime = 0;
    }
    ban_video.play();
  });
  $(".pause-bt").click(function() {
    $(".play-bt").show();
    $(".pause-bt").hide();
    $(".pause-bt").addClass("active");
    $(".stop-bt").removeClass("active");
    var ban_video = document.getElementById("ban_video");
    ban_video.pause();
  });
  $(".stop-bt").click(function() {
    $(".play-bt").show();
    $(".pause-bt").hide();
    $(".pause-bt").removeClass("active");
    $(".stop-bt").addClass("active");
    var ban_video = document.getElementById("ban_video");
    ban_video.currentTime = 0;
    ban_video.pause();
  });
});
body {
  margin: 0;
  padding: 0;
}

.play-bt {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding: 5px;
  background: #000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA9dJREFUeNrMmmtIFFEUx8dVLHsSlqVhqRioJFL4ocjIyEdi9iALAoMgCulFEESBVEQfCvtoUPRAksCgsKgkiqRAyzJ6oCGKabgklYb5SDO16X/YM7KKj507d+7OgR/rLs7d+587995z/ncDdF3XJMZiEA3CwDJ+nQGGwW/gBs2gHTSAbllfHGTxehdIABvBWpAEFoFpU1zXy6JqwHPwDLRa6UiA4IgEg61gN8jg91aCRqgMlIBKoRZIiEk2gyrdnugHt0CS2X6Z+edYUKKriU5wCoTIFpINmnX1UQHiZQk5CgZ0/4UbpFoVck53RvwEOaJCCnRnxS+QPlF/J1p+aVkt5n3CSfEVZIFaX/aRFbxBzdOcGdUgc2xWMPaO0458SUDEP4VCVoGC8VIM7zgEVgs0TvnTEfBFkZjDLGjcnT0CtAlOxHpuIwoUg78KJn+592T3HpGDIFzwDgWCEB6RPSCbE0I7I4PnyqhHayGvVLLiKUgDJ8EPm4TQzdtvaDCEpINIyV9Eq8p5sAHctUlMGtc/I0LybHwE6kAu2AHqJbc9B2yjVxISAZYrWGnugFRQyNWirKARjyEhiSxGRdB8OQ7Wg8eS2owHa1xcWwco3p1pRcsB+aDFYlu0UCW6FD1W48UQuALWgav8XiSm00JFQmL9nDu5eRlNE67XebKHOSQZfMEb3Anwzaz14JLggMiMPnABpIDroN+ML+XE+MzZwbAZIX0OE7ESlINSMMuMkDaHCKAa6Ayo4CrQtOXZ4AAR29k6PQ3mmp3o5FQGcS7kr4jlzudZXCDcJKQJDPhgPMuMEK5/jrHpbSXI/H5Dj9ZH3pRURTqvSIUSRGjsqNS4uG54pUAAnZ0UgYeU5Els9wGNirGP3LRRgFHJVfLjJHMDJp/rCU0NQ8hL8M4GEcl8xyg5jLKh/TKjlHZ5zfzLEr8gFJzVPEZflk0j3T2qz16WCp1FvBe0Zhq92skFnxTYQUWTmdhbwJBAo3UgAZQqPGqInEwIecE3BBruAR0Knfm9vrjxoZwu+KtynCqugX1jP5zoWCGZM9AFDhNRpXlczC5f65G3msf67HKQiFrOybrMFlblfGG7A0R8ADu1ydx+Hw5DU0CTH4/cHoFwWcfT0eC+YgGDfBjr01m7mR8MBIJ80KpARDXItOuXDwZLwEXw3QYBlBEcALPN9kv0RzUaJ4G7wCbNc1wnarv2sqd1G9wDPSKNWBFixEwQx047mdNLwXw2E4K9BNKB6R/QwTSwkf2aq9RhK52QIWTEtgQxmufgJY7/JjsniA2CQdDJAhrZvG7hzy3HfwEGAFdwoJHzsBGDAAAAAElFTkSuQmCC) no-repeat 5px;
  position: absolute;
  bottom: 25px;
  right: 175px;
  margin-left: -25px;
  margin-top: -40px;
  z-index: 99;
  cursor: pointer;
}

.pause-bt {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding: 5px;
  background: #000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAw1JREFUeNrcmttLVEEcx2cP2pVSowtKFBQRSpoYW1QEQUVRIXSBHpIIumBPIQU+9Bd0gSKhrJ6jiOhCgT4EZQ9dKShJKboRhEWBaCm5atP3187AYZhd98yc457ZL3xwPc6657NzzplrgnPOQsoikBRUgnJQBiaDBEiBPvANfAQvwTPQCf7YfnjCUmQe2Al2gDowyeB/vAVt4IoQMwuJGFAJWkEvDy+joB1sMjmnoG8oBSfAAI82t0B1VCLrQBcfv/SDprBFjoIUz0+uiivBWqSF5z9PQEW28xzrqXURHGDxyGuwGXzV/dHL8sZTMZKg1IAboCSICAkcYfHLcnBJNLBjNohLwSMwhcU3TeBMNpFi0AFWsnhnQHSFujNdWvsdkKBMBScz1Uip6MDNZe5kA7hHL4p8B/daSAyC75pvbbZy7Df4oRybBmYafm6zFJENygTL7sddUKywS1PusqbcQcuOZh05yHtkjRhDmGYUDGswLZdr6Pwb/Df7dttxTY5tVK7lgmQLmOiJR+5a5m5oZLqERBaIX1wN1fIKEqkSteJylnmO14bMQk9MILieOSQyowBEpnuGUzhxy//HLy8AEe6JLrHrGfQ0nT0X00sinwtApIdE3hWASDeJvAG/HBd5TiI9LD1n5GqGwFP5+G13WOQF+CTHAjfBiOXASvdNqRnJsVyQXKfKkGN2uk/ui8G8SWaBVcqxGk25ck25KguJfnBNnUXZCu44dlm1gkOqCF1mD8FqRySoR1IL3qvj5b/gmEN9rxYpodaIzHnQGHMJWkBN+ts/nQhN2z9mdtNDUYamj9aL24D57ws1tBbeEOPWvlmVyCRCocX8PZZtSxQ5C07rRyTZ1w93g2Eej1ywXQzdBvryLHE8rOXpJOjMgwCtte8Le8NAGTg3jhIPQG1UWzjkDoiOCAU+gEZQFOVeFD/1oA0MhSTwChwWNR/4fGy3OVGqQT3YKHq8JTm+LyWG2bT4elv8TJmeRBgi/lSIbvliMJ+mMll6CY7aK9pc9hN8EX2kLpbegBZKW/VPgAEAGYXv2/tP1L0AAAAASUVORK5CYII=) no-repeat 5px;
  position: absolute;
  bottom: 25px;
  right: 175px;
  margin-left: -25px;
  margin-top: -40px;
  z-index: 99;
  cursor: pointer;
}

.stop-bt {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding: 5px;
  background: #000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAxxJREFUeNrcmktoFDEYxzPDamuxKopdaFVQEV+giFVaFbRWRER8IbRFKipV0KMHbx68eVVQRPSyF8WLFPGBVMRnS2tPolgoimgVWl91i7Dt1vj/2AyM407nsUk32T/8LrvzyH+SfEm+xOKcM0maBhaADWAxqAFzQSWwQQZ8B5/AEOgEfeCLjJcnJNxfD5rAZrAElEW4/yd4Ae6B2+BD7JJQjcSgAhwFnVyevoGLYGWcMsUxsR/0cnVKC0MLVRmpASk+efoIWmUbaQD9vDi6JppywUboq4zw4qoDJAsxchyMcT3UBar9ympNMI60ghTTS8/ALjDs/cPPyEYR2yuZfroFmsGo+0c7z4U0Gl/V1ARpHzgVpkaugGNMb42ARtDtZ4T+vAumBjyIqpUrLOgUn9bi1iOwHWS9Rqjwj0FdwAPGxQP6FJpoB6tCXNsCbngnjbtDmHBEM9YBhTUyFvK606LzZ2xXp2+L+NVUiVqGFfLaNWCbO2otB1uZmTrsNrJX8VdWqQaQtEU/aWTmag61JjJSBdYys1VLRhaB6YYbqScj60IMPrqrigzMZOZrNhmZVQJGKsjIjBIwkrBZiYiM/CoBH1k737LRQP22RT7WdP0gIz3gj+FGPpORdyBtuJEnZIRS/C8NN/LKFkvXhwab+Erld8aR9gjLS91ElTDkGHkLOgw1knKvEClqXY5wc0ZhwUYjRNEepwLcWRRKkT5nuXRp0GxghXhhQrIJLpIPYddH50Q5/kvQ0T7gAxacoBtXOPZYIT8Q9Y0dLE+CztElcELzfpEWSYdedzPx6gx4o7mRs24TfjVCqhN9RsdF101w0GlSE9UIqQucZJ49CA1Eies2rwkWkHS4znLbC7qYoYja5DcvDFoh0mBzRIPF132wR8wLfQJ3uO3pTeB1kTZB6fBAmcwDA0mx552dJAPvQYvKIxw7QbdCA8PgPJiv+iwKUQ4OgacS9+EHwQWwLE6ZLAnntWrBAbAFrAblEeZVgyLU05h1h+XOcsWb10g8eEbzs3lgPVjKcun+avbvwTPK2AyI6EPhtF+YKVh/BRgAE4h+1tvQXHoAAAAASUVORK5CYII=) no-repeat 5px;
  position: absolute;
  bottom: 25px;
  right: 100px;
  margin-left: -25px;
  margin-top: -40px;
  z-index: 99;
  cursor: pointer;
}

.mute-bt {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding: 5px;
  background: #000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA61JREFUeNrsmUlIVVEYxzM1S0sbJMvMMBQ0XKgN0IANBoVWFAVBrlpYJLqwVbWLaGVJRkW0MRpWNkohRFSYoEHDIqkoUlAbzAw1UXLg9j9wDv378j29vXevr7gf/PA70/X835nu+W6YZVmT/gcL84R4QjwhnhBPyCi2G2SDC6DZZtuNIBbcBiM+aykhDlNm/bJ7INxG221gWLc95q+ukwImg1PW79YJ4mw8o1K03+K2kOngpvWnfbIpJAd8p/atYI5bQhaCRmt0G4+QKJEuEs8474aQbNBi+baxhOwBzeCOqFdDzxgEWU4KKQDdln/zJ0RtAm1U9yKVpYkpds0pIQfAiDW2+ROijoJbov4mKq+g/B9aXFCFHLfGb2NNrSTQRfWfgkhdlgL6qawiWELUorxs2TMpZIleV/zcYtFmF5Xx/2vhjYFP9ihQDBaN88RdBlbbPKU/g3TQA7aC6yASlIIzus4U0ATSdPoByNP+ZlBLz1sL6uTJfthy3nhEzlF+D0igvhykMrX2Mul8+kBl5abNZFKX7fJ7XjX56l2qhNJX9KgpU33M136fHiFjK8EMU8nYsMtCHoIaSu8F0dr/AhqobB35nK+mX4oUMhFWSf4CsJzSdeRnmV9erx9j8SA1FIQ0go+UziX/CfnzQLL228EQTbvkUBDSD15QmkdE3VsGzb1Ji1H2DfRSvYRQEKLsFflzye/TGJup/w7QRmA2ipAQwp2aRv4QTSFzzplNaZDyI0NFiOy8sXCN3FVVnyMofyRUhKSR30W+2opjKG3WxVTawcwUnHAh6pfNofRL8pPEaHXQWomj/M5QEJIJFlP6kXiXM9YNWrU/X4+KsbZQELKP+tAjTu01YqTMtEsXApulkAiXRWTo1xJjN6iz0eJwrCd/Bfkt4L0U0uCykEKaImrnKaey7XoKGaulrTaP8p+Br3IUTuuhGs99RJ20BWBpAEKek6/uIq8pXSKmVaP2c8TUuhuMSGOsiG78zQ1xg74BhlFevmhTSmUnfAX7Ar2vR4CzQbyzR4M3VL+N6s8GHVR21YkoyqEgCTkp6hf5iCErW+VUXEsF1wYCFPKO6j7WI67yZ4F2Kqt3OtKYK4bfrpD9oFdPr1TKl8HwAjdiv+mgKYDYbyKIofR6METPqHUzGh8P7gchGp8oYsl9IMPt7yMqeFYV4PeRI6J92UR86DEcFYvUzherHdS22l9dt74hFuo33Srw1mbbnSARXBK3Se+rrifEE+IJ+YftpwADAJs4uzLWopW5AAAAAElFTkSuQmCC) no-repeat 5px;
  position: absolute;
  bottom: 25px;
  right: 25px;
  margin-left: -25px;
  margin-top: -25px;
  z-index: 99;
  cursor: pointer;
}

.mute-bt.stop {
  background: #000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAqpJREFUeNrsmU1IVUEUx59SZoiKiBV9WGAaqYuKsKKCQltEtI5cJEIf60IMIYPapAuh0CiKFtLmSQTRuhSEPqAWrWoXhKJPjT4oAym9/QfOxcPhznv39t5478Qc+PG4M2fuvD9z5szHLfI8L/U/WJET4oQ4IU6IExJg7WAvuA8+GOlBCTHMdW/Z3oLVJvoxOSIl4B7oYGVzoB58tyW01lMYnRTl02CnLUKawGOwI6DOGiGHQBps0tRbIeQ0hVNZFh9jQgqVNXq8cDYFKk1krXxfoEb0jhfepJCDoBc0Rez3LLgEKgohpAqkvWjGhdSBn1Seoecw/fax9930y1eJSOsDR9TcCRGV68C2PKK6gs0nla6fgFYwm6XNZcK3jbo5Ytr4iKiwvCXqx0CpZiROgEXm+xXs0YXWSgpRlIBR4XM7QMRu8IX5/CZhqaQIUVTTHozbVVa/FXwS9edzZa04hPh/dlr4ttOIvRDl/WHSb1xCFK1ggfl+pjnDLR12HYlTSIpG4Y+m7WtQbosQRVeAmHdgQ7Z2xQk8tb5Xq4IomwKZKHutuEekGcxo2t6NsteKU8gW8JH5qvCaFe27ky5kDXgpfG+ABtqH+bYETiVZyAPh95RdUrTRSu7bPNiXRCEDwmcclAmfDuEzIXfLcQvpFPWToFYzD64EpOQanZA3NMkW6Tcb+QrZDn6xuh/gQI41ZkS8b1B3HjkMakFxQC6X1gIGQeU/rhflYK24jXyVo00nqALH2JmoIGf2/QGbvSjnkYvgOTgT8WT6kBJCYyFvGhvBCGgO4Zv466AaMAyO2y7Ev+sdAudsvtfiXLPxXkvHBXbVsyJCTH5WOAoegWpWlqHQ+mbbF6tdlNEa6HkG1IF5G79YbQbPaH/Ubaof9zHUCXFCnBAnJBb7K8AA5jNpuFcQhagAAAAASUVORK5CYII=) no-repeat 5px;
}

.video {
  width: 100%;
  height: 650px;
  position: relative;
  background: url(data:image/jpeg;base64,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…);
}

.tv_video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video">
  <video id="ban_video" class="tv_video">
                     <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                               Your browser does not support the video tag.
                </video>

  <div class="play-bt"></div>
  <div class="pause-bt" style="display:none;"></div>
  <div class="mute-bt"></div>
  <div class="stop-bt"></div>

</div>

Codepen

关于javascript - 使用 jquery 函数播放或暂停视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57264787/

上一篇：jquery - 文本不淡入/淡出，可能是什么问题？

下一篇：javascript - JsPlumb 从起始元素获取所有连接

相关文章：

javascript - 悬停时抓取链接 - Firefox 插件

JavaScript 将原型(prototype)添加到现有对象

javascript - 我如何确定在第一次加载时是否在 jQuery 中单击了某些内容？

asp.net - 使用 jQuery 获取图像尺寸时遇到问题

jquery - 为 pageX 将一个 div 分成两半

jquery - 使用 jquery.validate.js 和 jquery.form.js 进行 Ajax 表单提交？

javascript - slider 图像在 Internet Explorer 中不起作用，但在其他浏览器中起作用

jquery - 如何固定div在父div中的位置？

javascript - 如何使图像弹出？

css - 将 3 个 div 在 4 个 div 下居中对齐

©2024 IT工具网  联系我们