如何自动播放多个视频标签在一个网页html打开模态

Question

我有一个HTML页面，它应该以两种不同的模式显示两个不同的视频。

我希望每当单击播放视频图标并打开模式时，视频都能自动开始播放。我用这个代码做到了这一点(video.forEach(video=>video.play(((；(但两个视频都开始播放。

当模态打开并播放视频时，用户点击窗口或模态关闭屏幕，视频被剪切并关闭。我用这个代码做到了这一点：(video.forEach(video=>video.pause(((；(。

我只需要使用JavaScript

提前感谢您的合作。

// modal and video
var modal = document.getElementsByClassName("modal");
var playVideo = document.getElementsByClassName("play-video");
var modalClose = document.getElementsByClassName("modal--close");
var video = document.querySelectorAll('video');
function setDataIndex() {
for (i = 0; i < playVideo.length; i++){
playVideo[i].setAttribute('data-index', i);
modal[i].setAttribute('data-index', i);
modalClose[i].setAttribute('data-index', i);
video.forEach(video => video.play());
}
}
for (i = 0; i < playVideo.length; i++){
playVideo[i].onclick = function() {
var ElementIndex = this.getAttribute('data-index');
modal[ElementIndex].style.display = "block";
};
modalClose[i].onclick = function() {
var ElementIndex = this.getAttribute('data-index');
modal[ElementIndex].style.display = "none";
video.forEach(video => video.pause());
};
}
window.onload = function() {
setDataIndex();
};
window.onclick = function(event) {
if (event.target === modal[event.target.getAttribute('data-index')]) {
modal[event.target.getAttribute('data-index')].style.display = "none";
video.forEach(video => video.pause());
}
};
// modal and video

:root{
/* colors */
--cws: #121214;         /*color name: Woodsmoke               RGB: 18, 18, 20              */
--clo: #2A827c;         /*color name: Lochinvar               RGB: 42, 130, 124            */
--cpr: #3CBBB0;         /*color name: Puerto Rico             RGB: 60, 187, 176            */
--cwa: #7C809B;         /*color name: Waterloo                RGB: 124, 128, 155           */
--csp: #F5EDF0;         /*color name: Soft Peach              RGB: 245, 237, 240           */
--cwh: #FFFFFF;         /*color name: White                   RGB: 255, 255, 255           */
}
.play-video{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: green;
}
/* modal */
.modal{
display: none;
position: fixed;
z-index:13;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
overflow-y: hidden; 
background: rgba(124, 128, 155,.8); 
}
.modal.active{
display: flex;
align-items: center;
justify-content: center;
}
.modal--content {
margin: auto;
width: 50%;
height: auto;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
.modal--header{
text-align: right;
position: absolute;
top: 20px;
right: 30px;
}
.modal--close{
color: var(--cws);
font-size: 3rem;
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
}

.modal--close:hover,
.modal--close:focus {
color: var(--csp);
cursor: pointer;
}
.modal--body{
width: 100%;
height: 100%;
}
.modal--body video{
width: 100%;
height: 100%;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border: 15px solid var(--csp);
}
/* modal */

<!--  icon play -->
<div class="play-video"></div>
<div class="play-video"></div>
<!--  icon play -->
<!-- The Modal -->
<div class="modal">
<div class="modal--header">
<span class="modal--close">&times;</span>
</div>
<div class="modal--content">
<div class="modal--body">
<video controls class="inlineVideo" autoplay="autoplay">
<source src="https://www.youtube.com/watch?v=sgNkCrAhTGc" >
</video>
</div>
</div>
</div>
<!-- The Modal -->
<!-- The Modal -->
<div class="modal">
<div class="modal--header">
<span class="modal--close">&times;</span>
</div>
<div class="modal--content">
<div class="modal--body">
<video controls class="inlineVideo" autoplay="autoplay">
<source src="https://www.youtube.com/watch?v=YZ0cJiVr2-w" >
</video>
</div>
</div>
</div>
<!-- The Modal -->

Answer 1

// modal and video
var modal = document.getElementsByClassName("modal");
var playVideo = document.getElementsByClassName("play-video");
var modalClose = document.getElementsByClassName("modal--close");
var video = document.querySelectorAll('video');
function setDataIndex() {
for (i = 0; i < playVideo.length; i++){
playVideo[i].setAttribute('data-index', i);
modal[i].setAttribute('data-index', i);
modalClose[i].setAttribute('data-index', i);
video[i].setAttribute('data-index', i);
}
}
for (i = 0; i < playVideo.length; i++){
playVideo[i].onclick = function() {
var ElementIndex = this.getAttribute('data-index');
modal[ElementIndex].style.display = "block";
};
modalClose[i].onclick = function() {
var ElementIndex = this.getAttribute('data-index');
modal[ElementIndex].style.display = "none";
video.forEach(video => video.pause());
};
}
window.onload = function() {
setDataIndex();
};
window.onclick = function(event) {
if (event.target === modal[event.target.getAttribute('data-index')]) {
modal[event.target.getAttribute('data-index')].style.display = "none";
video[ElementIndex].play();
}
};
// modal and video