一个js函数中使用多个类的多个视频

Question

我知道这个标题很混乱。

简而言之，我有 5 个视频，希望它们都使用 js 播放并在点击时单独暂停。

每个视频都有一个不同的班级，但我已经给他们上了第二个班级，以便将他们组合在一起。 （据我所知）

我的 js：

var myVideo = document.getElementByClassName("videos"); 

function playPause() { 
    if (myVideo.paused) 
        myVideo.play(); 
    else 
        myVideo.pause(); 
} 

我的 html：（所有 5 个视频都是相同的 html，除了 id 的）

        <div class="video1">
            <video id="video1" class="videos video1" width="500" height="303" onclick="playPause();">
                <source src="hlace.mp4" type="video/mp4">
                <source src="hlace.ogg" type="video/ogg">
            </video>
        </div>

我使用了.getElementById，并且 js 对我使用的 ID 的视频有效。但现在我想将它应用于所有视频，我很难过。

https://jsfiddle.net/jomot/1jvq1myf/

Answer 1

您可以执行以下操作 -

由于视频原因，您的 js fiddle 代码有很多错误，主要错误是 -

这个

var myVideo = document.getElementByClassName("videos"); 

应该改为

var myVideo = document.getElementsByClassName("videos"); 

下面的代码将让您了解您需要做什么。您可以简单地将 this.id 传递给 playpause() 函数。这样，它只会在被点击的 div 上起作用，而不是在其他人身上。通过这样做，您无需通过为所有 div 元素提供相同的 css 类来对您在代码中完成的元素进行分组。

希望这会有所帮助！

function playPause(id) { 
var divId = document.getElementById(id);
     if (divId.getAttribute('status') == 'paused') {
         divId.setAttribute('status', 'play');
         divId.play(); 
     }
    else{
    	divId.setAttribute('status', 'paused');
      divId.pause(); 
    }
  }

.responsive {
    padding: 0 6px;
    width: 24.99999%;
	margin-left: 20%;
	}

@media only screen and (max-width: 1700px){
    .responsive {
        width: 49.99999%;
        margin-left: 5%;
		}
	}

@media only screen and (max-width: 1200px){
    .responsive {
		width: 24.99999%;
		margin-left: 2%;
		}
	}
	
div.video1 {
	margin-left: 26%;
	margin-bottom: 1%;
	display: inline-block;
	  }
	  
div.video2 {
	margin-left: 26%;
	margin-bottom: 1%;
	display: inline-block;
	  }
	  
div.video3 {
	margin-left: 26%;
	margin-bottom: 1%;
	display: inline-block;
	  }

div.video4 {
	margin-left: 26%;
	margin-bottom: 1%;
	display: inline-block;
	  }

div.video5 {
	margin-left: 26%;
	margin-bottom: 10%;
	display: inline-block;
	  }

<div class="background">
	<div class="transbox">
		<hr>
		<h2> Highlights </h2>
		<hr>
		
		<div class="responsive">
		<div class="video1">
			<video id="video1" class="videos video1" status="paused" width="500" height="303" onclick="playPause(this.id);">
				<source src="hlace.mp4" type="video/mp4">
				<source src="hlace.ogg" type="video/ogg">
			</video>
		</div>
		</div>
		
		<div class="responsive">
		<div class="video2">
			<video id="video2" class="videos video2" status="paused" width="500" height="300" onclick="playPause(this.id);">
				<source src="hldustace.mp4" type="video/mp4">
				<source src="hldustace.ogg" type="video/ogg">
			</video>
		</div>
		</div>
		
		<div class="responsive">
		<div class="video3">
			<video id="video3" class="videos video3" status="paused" width="500" height="300" onclick="playPause(this.id);">
				<source src="hlflick.mp4" type="video/mp4">
				<source src="hlflick.ogg" type="video/ogg">
			</video>
		</div>
		</div>
		
		<div class="responsive">
		<div class="video4">
			<video id="video4" class="videos video4" status="paused" width="500" height="300" onclick="playPause(this.id);">
				<source src="hlmirage.mp4" type="video/mp4">
				<source src="hlmirage.ogg" type="video/ogg">
			</video>
		</div>
		</div>
		
		<div class="responsive">
		<div class="video5">
			<video id="video5" class="videos video5" status="paused" width="500" height="300" onclick="playPause(this.id)">
				<source src="hlreel.mp4" type="video/mp4">
				<source src="hlreel.ogg" type="video/ogg">
			</video>
		</div>
		</div>
		
	</div>
</div>

谢谢