Jquery:如何在 if else 语句中执行 .play() 函数？

Question

"message": "Uncaught TypeError: $(...).play 不是函数"

这是我收到的错误。 . .基本上我需要这个函数来隐藏一些 div 并显示和播放视频。由于上述错误，我的代码目前无法正常工作。

有问题的 Jquery 被注释掉了。

$(function() {
    $("#draggable").draggable({
    	containment: 'body', 
        revert:  function(dropped) {
             var $draggable = $(this),
                 hasBeenDroppedBefore = $draggable.data('hasBeenDropped'),
                 wasJustDropped = dropped && dropped[0].id == "droppable";
             if(wasJustDropped) {
                 return true;
             } else {
                 if (hasBeenDroppedBefore) {
                     $draggable.animate({ top: 0, left: 0 }, 'slow');
                     return false;
                 } else {
                     return true;
                 }
             }
        }
    });
    
   $("#droppable").droppable({
       over: function() {
           $(this).find('p').html('Reading...');
       },

       out: function() {
           var number = 1 + Math.floor(Math.random() * 2);
// The  $('#secondVideo').play(); is not causing my video to play after it shows
           if (number == 1) {
               $('#draggable, #draggable2, #droppable, #upperSwiper, #swiper, #firstVideo').hide();
               $('#secondVideo').show();
               $('#secondVideo').play();
           } else {
               $(this).find('p').html('Please Swipe Again At This Website To Enter');
           }
       },

       revert: function() {
           $(this).find('p').html('');
       },

       drop: function() {
           $(this).find('p').html('Error Reading Your Card');

       }
   });   
});

html, body {
  overflow-y:hidden;
  overflow-x:hidden;
  height:100%;
  body:100%;
}

#reader {
	position: absolute;
	background-color: #696969;
	width: 40%;
	height: 75px;
    Top: 89%;
    left:30%;
    z-index: 4;
    border-radius: 10px;
    -webkit-clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
	clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
	}

div.frontReader {
	background-color: #a9a9a9;
	width: 95%;
	height: 65px;
	position: relative;
	-webkit-clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
	clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
	z-index: ;
	left: 10px;
	border-radius: 10px;
	}

#firstVideo {
	position: absolute;
	width: 93%;
	height: auto;
	z-index: -2;
	margin-left: auto; 
  	margin-right: auto;
  	left: 0;
  	right: 0;
	}	
	
#secondVideo {
	position: absolute;
	width: 93%;
	height: auto;
	z-index: 3;
	margin-left: auto; 
  	margin-right: auto;
  	left: 0;
  	right: 0;
  	display:none;
	}

div.blackBar {
	position: relative;
	background-color: black;
	width: 250px;
	height: 23px;
	top: 75%;
	}

div.frontSwiper {
	background-color: #A9A9A9;
	width: 85%;
	height: 70px;
	position: relative;
	-webkit-clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
	clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
	z-index: ;
	border-radius: 10px;
	}
	
body { 
	background-color: black;
	width: 100%; 
	height: 100%;
	margin: auto; 
	}
	
#swiper {
	background-color: #b8b8b8;
	width: 100%;
	height: 70px;
	margin: 0 auto;
	position: relative; 
    Top: 91%;
    z-index: 0;
    border-radius: 0px;
	}
	
#upperSwiper {
	background-color: transparent;
	width: 34%;
	height: 75px;
	margin: 0 auto;
	position: relative; 
    Top: -90%;
    z-index: 1;
    border-radius: 0px;
	}
	
#droppable { 
	width: 45%;
	Height: 63%;
    margin: 0 auto;
	border-Width: 1px;  
    background-image:none;
    background-color: transparent;
    text-align: center;
    top: 40%;
    
	}
	
#draggable, #draggable2 {
	position: relative;
	top: 50%;
	width: 250px; 
	height: 160px;  
	border-Width: 0px;
	background-image:none;
	left: 75%;
	background-color: #FFD700;
	-webkit-clip-path: polygon(0% 0%, 91% 0, 100% 14%, 100% 100%, 0% 100%);
	clip-path: polygon(0% 0%, 91% 0, 100% 14%, 100% 100%, 0% 100%);
	z-index; -1;
	}

<link rel="stylesheet" 
		href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<video id="secondVideo" src="bRh-01.mp4">
	your browser does not support the video tag. 
</video>

<video id="firstVideo" loop autoplay src="bRh-03.mp4">
	your browser does not support the video tag. 
</video>

<div id="reader">
	<div class="frontReader"></div>
</div>
<div id="swiper">
	<div class="frontSwiper"></div>
	<div id="upperSwiper"></div>
</div>
<div id="draggable" class="ui-widget-content">
	<div class="blackBar"></div>
    <p></p>
</div>

<div id="droppable" class="ui-widget-header">
    <p style="font: italic bold 30px/40px Arial, Sans-serif; width: 75%, position: fixed; color: #FFD700;"></p>
    
</div>

Answer 1

问题是“播放”函数不是 jQuery 函数，但您正试图在 jQuery 对象上使用它，即 $('#secondVideo').play();。

你可以这样做:

$('#secondVideo')[0].play();

它将获取 DOM 元素，然后对其调用 .play()。

或者你可以这样做:

document.getElementById('secondVideo').play();

...它只是使用 vanilla javascript 而不是 jQuery 来获取元素。