0
"message": "Uncaught TypeError: $(...).play is not a function"Jquery：if else文の実行中に.play（）関数を実行する方法を教えてください。
これは私が受け取っているエラーです。 。 。基本的に私はこの機能をいくつかのdivを隠し、ビデオを見せたり、再生したりする必要があります。私のコードは、この瞬間に上記のエラーで動作しません。
問題のJqueryがコメントアウトされています。
$(function() {
$("#draggable").draggable({
\t 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 {
\t position: absolute;
\t background-color: #696969;
\t width: 40%;
\t height: 75px;
Top: 89%;
left:30%;
z-index: 4;
border-radius: 10px;
-webkit-clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
\t clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
\t }
div.frontReader {
\t background-color: #a9a9a9;
\t width: 95%;
\t height: 65px;
\t position: relative;
\t -webkit-clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
\t clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
\t z-index: ;
\t left: 10px;
\t border-radius: 10px;
\t }
#firstVideo {
\t position: absolute;
\t width: 93%;
\t height: auto;
\t z-index: -2;
\t margin-left: auto;
\t margin-right: auto;
\t left: 0;
\t right: 0;
\t } \t
\t
#secondVideo {
\t position: absolute;
\t width: 93%;
\t height: auto;
\t z-index: 3;
\t margin-left: auto;
\t margin-right: auto;
\t left: 0;
\t right: 0;
\t display:none;
\t }
div.blackBar {
\t position: relative;
\t background-color: black;
\t width: 250px;
\t height: 23px;
\t top: 75%;
\t }
div.frontSwiper {
\t background-color: #A9A9A9;
\t width: 85%;
\t height: 70px;
\t position: relative;
\t -webkit-clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
\t clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
\t z-index: ;
\t border-radius: 10px;
\t }
\t
body {
\t background-color: black;
\t width: 100%;
\t height: 100%;
\t margin: auto;
\t }
\t
#swiper {
\t background-color: #b8b8b8;
\t width: 100%;
\t height: 70px;
\t margin: 0 auto;
\t position: relative;
Top: 91%;
z-index: 0;
border-radius: 0px;
\t }
\t
#upperSwiper {
\t background-color: transparent;
\t width: 34%;
\t height: 75px;
\t margin: 0 auto;
\t position: relative;
Top: -90%;
z-index: 1;
border-radius: 0px;
\t }
\t
#droppable {
\t width: 45%;
\t Height: 63%;
margin: 0 auto;
\t border-Width: 1px;
background-image:none;
background-color: transparent;
text-align: center;
top: 40%;
\t }
\t
#draggable, #draggable2 {
\t position: relative;
\t top: 50%;
\t width: 250px;
\t height: 160px;
\t border-Width: 0px;
\t background-image:none;
\t left: 75%;
\t background-color: #FFD700;
\t -webkit-clip-path: polygon(0% 0%, 91% 0, 100% 14%, 100% 100%, 0% 100%);
\t clip-path: polygon(0% 0%, 91% 0, 100% 14%, 100% 100%, 0% 100%);
\t z-index; -1;
\t }<link rel="stylesheet"
\t \t 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">
\t your browser does not support the video tag.
</video>
<video id="firstVideo" loop autoplay src="bRh-03.mp4">
\t your browser does not support the video tag.
</video>
<div id="reader">
\t <div class="frontReader"></div>
</div>
<div id="swiper">
\t <div class="frontSwiper"></div>
\t <div id="upperSwiper"></div>
</div>
<div id="draggable" class="ui-widget-content">
\t <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>