Question

我知道这个标题很混乱。

所以简单地说，我有5个视频，希望它们全部使用js来播放并单独暂停它们。

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

我的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已经为我使用的视频工作了。但现在我想将它应用于所有视频，我很难过。

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

Answer 1

您可以执行以下操作 -

你的js小提琴代码由于视频而有很多错误，主要错误是 -

此

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

应改为

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

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

希望这有帮助！

＆＃13;

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(); 
    }
  }

＆＃13;

.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;
	  }

＆＃13;

<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>

＆＃13;

由于

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

1 个答案: