我在我的代码中遇到了一些问题,我在这个论坛中找到了一些解决方案,但不知何故它对我没有帮助。所以也许你会找到解决方法。我需要在使用十字图标关闭视频后以及单击模态后停止视频。此外,如果该视频再次打开后从头开始,那将很酷。
@font-face {
font-family: "BebasNeue";
src: url("fonts/BebasNeue.otf");
}
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
font-smoothing: antialiased;
text-rendering:optimizeLegibility;
}
::selection {
background: #f3df4b; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #f3df4b; /* Gecko Browsers */
}
html, body {
height: 100%;
background: #f8f8f8; /* fallback for old browsers */
}
h1{
text-decoration: none;
color: black;
font-family: 'BebasNeue', sans-serif;
font-size: 6rem;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
h2{
text-decoration: none;
color: black;
font-family: 'BebasNeue', sans-serif;
font-size: 3.5rem;
font-style: normal;
font-weight: normal;
font-variant: small-caps;
}
p{
font-family: 'BebasNeue', sans-serif;
font-size: 1.25rem;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #111;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px;
}
.push {
height: 50px;
}
/*/////////menu////////////*/
header{
height: 100px;
display: inline-block;
position: relative;
z-index: 100;
width: 100%;
}
.menu_box{
width: 100%;
overflow: hidden;
position: fixed;
}
.menu_box_logo{
float: left;
padding: 20px 20px 20px 20px;
}
.menu_box_ul {
float: right;
padding: 40px 0 20px 20px;
}
.menu_box_ul a {
display: inline;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: black;
font-family: 'BebasNeue', sans-serif;
font-size: 1.75rem;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
.menu_box_ul a:hover {
color: #F3DF4B;
}
.menu_box_ul .icon {
display: none;
}
.menu_box_ul_more{
display: none;
top: 40px;
}
.menu_box_ul_more a {
display: inline;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: black;
font-family: 'BebasNeue', sans-serif;
font-size: 1.25rem;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
.menu_box_ul_more a:hover {
color: white;
}
@media screen and (max-width: 826px) {
.menu_box_ul_more{
display: none;
}
}
@media screen and (min-width: 826px) {
.menu_box_ul_more.show{
display: none;
}
}
@media screen and (max-width: 826px) {
.menu_box_ul a {
display: none;
}
.menu_box_ul a.icon,
.menu_box_ul a.language {
display: inline;
}
}
@media screen and (max-width: 826px){
.menu_box_ul_more.show .icon{
position: absolute;
right: 0;
top: 0;
}
.menu_box_ul_more.show{
background-color: #f8f8f8;
text-align: center;
padding-top: 110px;
}
.menu_box_ul_more.show a{
display: block;
}
}
#a_checked{
color: #F3DF4B;
}
.menu_icon{
display: none;
}
/* The container <div> - needed to position the dropdown content */
.container{
margin-top: 100px;
}
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f8f8f8;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
/*/////////index////////////*/
.logo{
width: 100%;
text-align:center;
}
.text{
display:table-cell;
vertical-align: middle;
text-align:center;
width: 100%;
padding: 120px 20px 0px 20px;
margin: auto;
width: 50%;
}
.text1{
padding-top: 15px;
padding-bottom: 15px;
}
.text2{
padding-top: 15px;
padding-bottom: 15px;
}
.text2 .h2{
font-family: 'BebasNeue', sans-serif;
font-size: 2.5rem;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
.text3{
padding-top: 15px;
padding-bottom: 15px;
}
.about_button{
padding-top: 15px;
padding-bottom: 15px;
line-height: 500px;
text-align: center;
height: 500px;
}
.text3_span{
display: inline-block;
vertical-align: middle;
line-height: normal;
}
.about_read_watch{
line-height: 100px;
text-align: center;
height: 100px;
margin-bottom: 60px;
margin-top: 20px;
}
.text4_span{
display: inline-block;
vertical-align: middle;
line-height: normal;
}
.button{
background-color: transparent;
color: #F3DF4B;
border: 2px solid #F3DF4B;
border-radius: 999px;
padding-top: 1em;
padding-right: 1.44em;
padding-right: calc(1.44em - .2em);
padding-bottom: 1em;
padding-left: 1.44em;
text-align: center;
font-weight: 500;
font-style: normal;
font-size: 0.9375rem;
text-transform: uppercase;
letter-spacing: .2em;
text-decoration: none;
outline: none;
}
.button2{
background-color: transparent;
color: #F3DF4B;
border: 2px solid #F3DF4B;
border-radius: 999px;
padding-top: 1em;
padding-right: 1.44em;
padding-right: calc(1.44em - .2em);
padding-bottom: 1em;
padding-left: 1.44em;
text-align: center;
font-weight: 500;
font-style: normal;
font-size: 0.9375rem;
text-transform: uppercase;
letter-spacing: .2em;
text-decoration: none;
outline: none;
margin-left: 20px;
}
.button3{
background-color: transparent;
color: #F3DF4B;
border: 2px solid #F3DF4B;
border-radius: 999px;
padding-top: 1em;
padding-right: 1.44em;
padding-right: calc(1.44em - .2em);
padding-bottom: 1em;
padding-left: 1.44em;
text-align: center;
font-weight: 500;
font-style: normal;
font-size: 0.9375rem;
text-transform: uppercase;
letter-spacing: .2em;
text-decoration: none;
outline: none;
margin-left: 20px;
}
.button:hover,
.button2:hover,
.button3:hover{
color: #000;
background-color: #f8f8f8;
border: 2px solid #000;
-webkit-transition: color 500ms ease-in-out, border-color 170ms ease-in-out;
-moz-transition: color 500ms ease-in-out, border-color 170ms ease-in-out;
-ms-transition: color 500ms ease-in-out, border-color 170ms ease-in-out;
-o-transition: color 500ms ease-in-out, border-color 170ms ease-in-out;
}
@media (max-width:545px) {
.text1 h1{
font-size: 2.5rem;
}
.text1{
padding-top: 15px;
padding-bottom: 5px;
}
.text2{
padding-top: 5px;
padding-bottom: 5px;
}
.text2 h2{
font-size: 2rem;
}
.text3{
padding-top: 5px;
padding-bottom: 15px;
}
.text{
padding: 50px 20px 0px 20px;
}
}
.imglog{
margin-top: 70px;
width: 500px;
height: 190.5px;
}
@media (max-width: 470px) {
.imglog{
width: 250px;
height: 95.25px;
}
}
@media (max-width: 585px) {
.button3{
margin-top: 20px;
}
}
@media (max-width: 390px) {
.button2{
margin-top: 20px;
}
}
/*/////////footer////////////*/
@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
.footer {
height: 50px;
text-align: center;
}
.col-lg-6 .offset-lg-2 {
width: 260px;
display:block;
margin: 0 auto;
}
.col-lg-6 .offset-lg-2 ul{
padding:0;
list-style: none;
}
.social-icon {
color: #fff;
font-size: 1.875rem;
}
.social-icons{
margin-bottom: -1rem;
}
.social-icons li {
vertical-align: top;
display: inline;
}
.social-icons a {
color: rgb(234, 234, 234);
text-decoration: none;
}
.fa-facebook {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
color: #000;
}
.fa-facebook:hover {
background-color: #3d5b99;
}
.fa-youtube {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
color: #000;
}
.fa-youtube:hover {
background-color: #e64a41;
}
.fa-linkedin {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
color: #000;
}
.fa-linkedin:hover {
background-color: #0073a4;
}
.fa-instagram {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
color: #000;
}
.fa-instagram:hover {
background-color: #9b6954;
}
/*/////////work.html file////////////*/
.col-lg-5.col-md-12 a{
text-decoration-line: none;
}
#div_box_video{
width: 650px;
height: 550px;
background-image: url(/./honey/rusne.jpg);
-ms-background-position-x: center;
-ms-background-position-y: bottom;
background-position: center bottom;
background-size: cover;
margin: 0 auto;
margin-top: 30px;
}
#div_box_video img{
z-index: 3;
}
#shadow_box{
position: relative;
width: 650px;
height: 550px;
background-color: rgba(137, 137, 137, 0.56);
z-index: 10;
text-align: center;
color: rgb(28, 28, 28);
}
#shadow_box:hover{
background-color: rgba(137, 137, 137, 0.9);
}
#popupBoxOnePosition{
top:0;
left:0;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
z-index: 101;
}
#popupBoxTwoPosition{
top:0;
left:0;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
z-index: 101;
}
#popupBoxThreePosition{
top:0;
left:0;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
z-index: 101;
}
#popupBoxFourPosition{
top:0;
left:0;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
z-index: 101;
}
.login-html{
width:70%;
height:85%;
position:absolute;
padding:90px 70px 50px 70px;
margin: auto;
top: 7.5%;
left: 15%;
border-radius: 10px;
}
.close {
position: absolute;
right: 20px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
#forphone2{
margin: 0 auto;
width: 60%;
}
@media (max-width:1298px) {
.sign-in-htm iframe{
height: 550px;
}
.login-html{
width: 90%;
left: 5%;
}
}
@media (max-width:1000px) {
.sign-in-htm iframe{
height: 400px;
}
.login-html{
width: 90%;
left: 5%;
top: 15%;
}
}
@media (max-width:780px) {
.sign-in-htm iframe{
height: 300px;
}
.login-html{
width: 100%;
left: 0%;
}
}
@media (max-width:550px) {
.sign-in-htm iframe{
height: 300px;
}
.login-html{
width: 100%;
left: 0%;
top: 20%;
padding:90px 35px 50px 35px;
}
}
@media (max-width:450px) {
.sign-in-htm iframe{
height: 200px;
}
.login-html{
width: 100%;
left: 0%;
top: 20%;
padding:90px 15px 50px 15px;
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="lt-LT"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src=""></script>
<script>
</script>
<link rel="icon" type="image/x-icon" href="../img/favicon.ico" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="google-site-verification" content="" />
<title>Honey agency | Video Production</title>
<meta name="google-site-verification" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" itemprop="description" content="Main agiency "Video Production" services: video promotion, video creation, video" />
<meta name="keywords" itemprop="keywords" content="video promotion, video creation, video" />
<link rel="canonical" href="http://thehoney.lt/" />
<meta property="og:title" content="Begining"/>
<meta property="og:description" content="[fullwidth backgroundcolor="" backgroundimage="" backgroundrepeat="no-repeat" backgroundposition="top left" backgroundattachment="scroll" bordersize="1px" bordercolor="" paddingTop="" paddingBottom="20"]Make your story sweet as honey!Agiency "VIDEO PRODUCTION SERVICES" - is"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://thehoney.lt/"/>
<meta property="og:site_name" content="VIDEO PRODUCTION SERVICES"/>
<meta property="og:image" content="http://thehoney.lt/img/honey_logo_transparent_croped.png"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../style.css?v=1.1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
<div id="popupBoxOnePosition" class="modal">
<div class="login-html">
<span onclick="document.getElementById('popupBoxOnePosition').style.display='none'" class="close" title="Close Modal1">×</span>
<div class="login-form">
<div class="sign-in-htm">
<iframe width="100%" height="700px" src="https://www.youtube.com/embed/Ttt8U6teiH0?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div id="popupBoxTwoPosition" class="modal">
<div class="login-html">
<span onclick="document.getElementById('popupBoxTwoPosition').style.display='none'" class="close" title="Close Modal2">×</span>
<div class="login-form">
<div class="sign-in-htm">
<iframe width="100%" height="700" src="https://www.youtube.com/embed/x-3BnCklSuE?showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div id="popupBoxThreePosition" class="modal">
<div class="login-html">
<span onclick="document.getElementById('popupBoxThreePosition').style.display='none'" class="close" title="Close Modal3">×</span>
<div class="login-form">
<div class="sign-in-htm">
<iframe width="100%" height="700px" src="https://www.youtube.com/embed/Ttt8U6teiH0?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div id="popupBoxFourPosition" class="modal">
<div class="login-html">
<span onclick="document.getElementById('popupBoxFourPosition').style.display='none'" class="close" title="Close Modal4">×</span>
<div class="login-form">
<div class="sign-in-htm">
<iframe width="100%" height="700px" src="https://www.youtube.com/embed/Ttt8U6teiH0?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="wrapper">
<header>
<div class="menu_box" id="menu_box">
<div class="menu_box_logo">
<a href="../"><img class="imglogo" style="width: 250px; height:95,25px;" src="../img/honey_logo_transparent_croped.png" alt="Honey logo"></a>
</div>
<div class="menu_box_ul" id="myTopnav">
<a href="." id="a_checked">Our work</a>
<a href="../about/">Who we are</a>
<a href="../contacts/">Contact us</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
<div class="menu_box_ul_more" id="myDropdown" class="dropdown-content">
<a href="." id="a_checked">Our work</a>
<a href="../about/">Who we are</a>
<a href="../contacts/">Contact us</a>
</div>
</div>
</header>
<div class="container-fluid" style="margin-bottom: 70px; width:100%;">
<div class="row justify-content-center" style="width:100%; margin-right: 0; margin-left: 0;">
<div class="col-lg-5 col-md-12" id="forphone">
<a id="forphone2" href="javascript:void(0)" onclick="document.getElementById('popupBoxOnePosition').style.display='block'" style="width:auto;">
<div class="col-12" id="div_box_video" style="padding-left: 0; padding-right: 0;">
<div class="col-12" id="shadow_box">
<h1 style="color: #f8f8f8; text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);">Rusnytė<p >Rusnytės projektas</p></h1>
</div>
</div>
</a>
</div>
<div class="col-lg-5 col-md-12" id="forphone">
<a href="javascript:void(0)" onclick="document.getElementById('popupBoxTwoPosition').style.display='block'" style="width:auto;">
<div class="col-12" id="div_box_video" style="padding-left: 0; padding-right: 0;">
<div class="col-12" id="shadow_box">
<h1 style="color: #f8f8f8; text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);">Rusnytė<p >Rusnytės projektas</p></h1>
</div>
</div>
</a>
</div>
</div>
<div class="row justify-content-center" style="width:100%; margin-right: 0; margin-left: 0;">
<div class="col-lg-5 col-md-12" >
<a href="javascript:void(0)" onclick="document.getElementById('popupBoxThreePosition').style.display='block'" style="width:auto;">
<div class="col-12" id="div_box_video" style="padding-left: 0; padding-right: 0;">
<div class="col-12" id="shadow_box">
<h1 style="color: #f8f8f8; text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);">Rusnytė<p >Rusnytės projektas</p></h1>
</div>
</div>
</a>
</div>
<div class="col-lg-5 col-md-12" >
<a href="javascript:void(0)" onclick="document.getElementById('popupBoxFourPosition').style.display='block'" style="width:auto;">
<div class="col-12" id="div_box_video" style="padding-left: 0; padding-right: 0;">
<div class="col-12" id="shadow_box">
<h1 style="color: #f8f8f8; text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);">Rusnytė<p >Rusnytės projektas</p></h1>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="raw" style="margin-top: 70px;">
<div class="about_read_watch">
<span class="text4_span">
<input type="button" class="button" onclick="location.href='../contacts';" value="Contact Us"/>
</span>
</div>
</div>
<div class="push"></div>
</div>
<footer class="footer">
<div class="social">
<div class="footer-social-icons">
<ul class="social-icons">
<li><a target="_blank" href="https://www.facebook.com/Honey-Media-247807789328138/" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
<li><a target="_blank" href="https://www.linkedin.com/company/11763547/" class="social-icon"> <i class="fa fa-linkedin"></i></a></li>
<li><a target="_blank" href="https://www.instagram.com/thehoney_media/" class="social-icon"> <i class="fa fa-instagram"></i></a></li>
<li><a target="_blank" href="https://www.youtube.com/channel/UCQhsEwX6sxXnxt70pJXg1Rw/featured" class="social-icon"> <i class="fa fa-youtube"></i></a></li>
</ul>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
var scroll_start = 0;
var startchange = $('.menu_box');
var offset = startchange.offset();
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$('.menu_box').css('background-color', '#f8f8f8');
$('.imglogo').css('width', '125px');
$('.imglogo').css('height', '47.625px');
$('.menu_box_ul a').css('font-size', '1.25rem');
$('.menu_box_logo').css('padding', '10px 10px 10px 10px');
$('.menu_box_ul').css('padding', '25px 0 10px 10px');
$('.menu_box_ul_more.show a').css('font-size', '1.75rem');
$('.menu_box_ul_more.show').css('padding-top', '80px');
} else {
$('.menu_box').css('background-color', 'transparent');
$('.imglogo').css('width', '250px');
$('.imglogo').css('height', '95.25px');
$('.menu_box_ul a').css('font-size', '1.75rem');
$('.menu_box_logo').css('padding', '20px');
$('.menu_box_ul').css('padding', '40px 0 20px 20px');
$('.menu_box_ul_more.show a').css('font-size', '2rem');
$('.menu_box_ul_more.show').css('padding-top', '110px');
}
});
});
</script>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.icon')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<script>
// Get the modal
var modal = document.getElementById('popupBoxOnePosition');
var modal2 = document.getElementById('popupBoxTwoPosition');
var modal3 = document.getElementById('popupBoxThreePosition');
var modal4 = document.getElementById('popupBoxFourPosition');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
if (event.target == modal2) {
modal2.style.display = "none";
}
if (event.target == modal3) {
modal3.style.display = "none";
}
if (event.target == modal4) {
modal4.style.display = "none";
}
}
</script>
</body>
</html>
你应该postMessage
像下面这样:
$('.close-modal').click(function(){
$('.your-iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句