javascript - 在一个js函数中使用多个具有多个类的视频

Question

我知道这个标题很令人困惑。

简单来说，我有 5 个视频，希望它们都使用 js 来播放并单独 onclick 暂停。

每个视频都有一个不同的类别，但我给它们都设置了第二个类别，将它们分组在一起。 (据我所知)

我的js:

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

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

我的 html:(除了 id 之外，所有 5 个视频都是相同的 html)

        <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。通过这样做，无需通过为所有 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>

谢谢