为什么视频自动播放不工作时使用的引导旋转木马?



视频不能自动播放。相同的代码工作,如果放置在不同的文件,但相同的代码是不与我的页面工作。有谁能帮帮忙吗?

现在工作URL: https://pcbmagic.com/

以上URL视频中的不能自动播放。我已经尝试了所有可能的方法,但仍然不起作用。也许我的解释不是很好,但希望你能理解,如果需要澄清,你可以评论。

thanks in advance.

.video
{
width: 100%;
height: 512px;
object-fit: cover;
}
#carousel .carousel-item {
height: 100vh;
width: 100%;
min-height: 350px;
background: no-repeat center center scroll;
background-size: cover;
}

#carousel .carousel-inner .carousel-item {
transition: -webkit-transform 2s ease;
transition: transform 2s ease;
transition: transform 2s ease, -webkit-transform 2s ease;
}

#carousel .carousel-item .caption {
background-color: rgba(0, 0, 0, 0.5);
padding: 40px;
color: white;
animation-duration: 1s;
animation-delay: 2s;
}

#carousel .caption h2 {
animation-duration: 1s;
animation-delay: 2s;
}

#carousel .caption p {
animation-duration: 1s;
animation-delay: 2.2s;
}

#carousel .caption a {
animation-duration: 1s;
animation-delay: 2.4s;
}

/* Button */
.delicious-btn {
display: inline-block;
color: #ffffff;
border: none;
border-left: 3px solid #1c8314;
border-radius: 0;
padding: 0 30px;
font-size: 16px;
line-height: 35px;
font-weight: 600;
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
text-transform: capitalize;
background-color: #40ba37;
margin-top: 15px;
}

.delicious-btn.active, .delicious-btn:hover, .delicious-btn:focus {
font-size: 16px;
font-weight: 600;
color: #ffffff;
background-color: #1c8314;
border-color: #40ba37;
}

.slider-content-main
{
background: white;
padding: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<section class="">
<div id="carouselExampleIndicators" class="carousel slide hero-slides" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox" style="border: 1px solid #dedede;">
<video autoplay loop class="video" id="vid">
<source src="https://pcbmagic.com/small5.mp4" width="1024" type="video/mp4" >
Your browser does not support the video tag.
</video>
<div class="carousel-item active">
<div class="container d-none d-md-block">
<div class="row align-items-center ml-4" style="height: 512px;">
<div class="col-12 col-md-9 col-lg-7 col-xl-6 slider-content-main">
<div class="caption animated fadeIn">
<h2 class="animated fadeInLeft">Boat Excursions</h2>
<p class="animated fadeInRight">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique nisl vitae luctus sollicitudin. Fusce consectetur sem eget dui tristique, ac posuere arcu varius.</p>
<a class="animated fadeInUp btn delicious-btn" href="#">Learn more</a>
</div>
</div>
</div>
</div>
</div>

<div class="carousel-item ">
<div class="container d-none d-md-block">
<div class="row align-items-center ml-4" style="height: 512px;">
<div class="col-12 col-md-9 col-lg-7 col-xl-6 slider-content-main">
<div class="caption animated fadeIn">
<h2 class="animated fadeInLeft">Explore the river valley</h2>
<p class="animated fadeInRight">Lorem ipsum dolor sit amet,</p>
<a class="animated fadeInUp btn delicious-btn" href="#">Learn more</a>
</div>
</div>
</div>
</div>
</div>
<!--<div class="carousel-item">
<img class="d-block w-100" src="https://pcbwayfile.s3-us-west-2.amazonaws.com/banner/21/03/25/1808173691783t.jpg" alt="Third slide">

</div>-->
</div>
</div>

</section>
</body>
</html>

你必须在你的视频标签中添加静音:-)。

<video autoplay loop ➡️ muted ⬅️ class="video">

这是因为谷歌不允许视频自动播放有音频。你可以通过下面的链接阅读犯罪政策。

只允许一次用户与该视频交互。点击,丝锥等。

https://developer.chrome.com/blog/autoplay/

最新更新