Question

我有另一个快速问题。我目前正在开发一个项目，它是同一个div容器中的导航和视频播放器。

https://i.stack.imgur.com/W49lY.png

https://i.stack.imgur.com/s89Oy.png

点击四个框之一后，另一个视频将弹出并显示在同一位置。

我应该采用哪种方法？ HTML /使用Javascript？

我对JavaScript完全不熟悉，所以我知道这段代码是错误的，但这是我到目前为止所做的。

＆＃13;

<div class="row" style="margin-left: auto;">
      <div> 
  		<button onclick="Word()">Word</button> 
  		<button onclick="Excel()">Excel</button>
  		<button onclick="PowerPoint()">PowerPoint</button>
  		<button onclick="OneNote()">OneNote</button>
  		<br><br>
  		<video id="word" width="560" height="315" src="https://www.youtube.com/watch?v=S-nHYzK-BVg"></video>
  		<video id="excel" width="560" height="315" src="https://www.youtube.com/watch?v=S-nHYzK-BVg"></video>
		<video id="powerpoint" width="560" height="315" src="https://www.youtube.com/watch?v=S-nHYzK-BVg"></video>
		<video id="onenote" width="560" height="315" src="https://www.youtube.com/watch?v=S-nHYzK-BVg"></video>
	  </div> 

	  <script> 
		var myVideo = document.getElementById("word");

		function Word() { 
    		if (myVideo.onClick) 
        	myVideo.play(); 
    	else 
        	myVideo.pause(); 
		} 

		function Excel() { 
			
    		myVideo.play(); 
    	else
    		myVideo.pause();
		} 

		function PowerPoint() { 
    		myVideo.play();
    	else
    		myVideo.pause(); 
		} 

		function OneNote() { 
    		myVideo.play();
    	else
    		myVideo.pause(); 
		} 
		</script>
</div>

＆＃13;

任何帮助将不胜感激！

Answer 1

我会使用一个名为videoSelect（）的函数，并在单击按钮时更改具有播放器ID的div的HTML内容。

innerHTML用于更改元素的html内容。 https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

（this.id）检索按钮的id并将其传递给videoSelect函数。

this.id = element

此处的完整示例 - ＆gt; https://codepen.io/chaosmaths/pen/aKmOVm/

请注意，您的帖子中的视频网址对于所有示例都是相同的，因此我将网址更改为我认为您想要的视频。如果他们不只是更改相应变量中的URL。您也可以使用视频代码而不是iframe。我刚刚使用它，因为它是YouTube提供的嵌入代码。

HTML

<div class="row">
  <div id="options">
    <button id="word" onclick="videoSelect(this.id)">Word</button>
    <button id="excel" onclick="videoSelect(this.id)">Excel</button>
    <button id="powerpoint" onclick="videoSelect(this.id)">PowerPoint</button>
    <button id="onenote" onclick="videoSelect(this.id)">OneNote</button>
  </div>

  <div id="player"></div>

</div>

CSS

#options{
  text-align: center;
}
#player{
  text-align: center;
  margin-top: 15px;
}

JS

var word = 'https://www.youtube.com/embed/S-nHYzK-BVg';
var excel = 'https://www.youtube.com/embed/rwbho0CgEAE';
var powerpoint = 'https://www.youtube.com/embed/XF34-Wu6qWU';
var onenote = 'https://www.youtube.com/embed/qN15XnU96vQ';

var player = document.getElementById('player');
function videoSelect(element){
  if (element === "word"){
    player.innerHTML = '<iframe width="560" height="315" src="' + word + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
  }
   if (element === "excel"){
    player.innerHTML = '<iframe width="560" height="315" src="' + excel + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
  }
   if (element === "powerpoint"){
    player.innerHTML = '<iframe width="560" height="315" src="' + powerpoint + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
  }
   if (element === "onenote"){
    player.innerHTML = '<iframe width="560" height="315" src="' + onenote + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
  }

}

Youtube视频播放器在按钮点击时在同一地点播放视频

1 个答案: