html - 如何从视频链接中点击并让它在下面的区域播放？

Question

我的网站上有几个视频，它们如下所示:

<ul id="toolsButtons" class="ahrefs__tools__nav">
  <li>
    <div class="tools-icon">
      <a href=https://www.youtube.com/watch?v=A1nRiiWYgZw target=_blank><img src=Traditional_vs_GATE_s.PNG></a>
      <use xlink:href="#keyword-research-icon"></use>
      <p class="tools-icon__text">Traditional vs GATE</p>
  </li>
  <li>
    <div class="tools-icon">
      <a href=https://www.youtube.com/watch?v=wLHfGQlLqtE target=_blank><img src=Guess_GATE_Password.PNG></a>
      <use xlink:href="#competitive-analysis-icon"></use>
      <p class="tools-icon__text">GATE Passcode</p>
    </div>
  </li>
  <li>
    <div class="tools-icon">
      <a href=https://www.youtube.com/watch?v=5tAGemIvUeI target=_blank><img src=GATE_Demo.PNG></a>
      <use xlink:href="#keyword-research-icon"></use>
      <p class="tools-icon__text">How GATE Works</p>
    </div>
  </li>
</ul>

如何在列表下方创建一个查看区域，以便在单击视频链接时，它会在查看区域中播放？

Answer 1

正如我在评论中建议的那样，我创建了一个 div ，最初是隐藏的，它扮演弹出模式的 Angular 色，将在 a 时显示。具有 data-target="modal" 的标签被点击。我对你的 HTML 做了一些改动我将在答案中涵盖它们的代码。

过程:

当您单击具有 data-target="modal" 的链接时(一个链接具有视频的 href 属性，这里我为每个链接添加了一个 data-target="modal" 只是为了将这些链接与页面中可能存在的其他链接区分开来)模态 div我给了它id="modal"将显示并填充适当的视频。因此，每次单击链接时它的 href属性将放置在 src 中iframe 的属性将托管视频的标签。

最终结果:

注意:我将提供一个可运行的片段，但由于 Stack Overflow 的一些限制，它可能无法按预期工作。为此，我做了一个工作 DEMO在 CodePen 上，您可以根据需要检查和使用代码。

var modal = document.getElementById('modal'), closeBtn = modal.querySelector('.close'), ytVideo = modal.querySelector('.content .yt-video'), title = modal.querySelector('.content .title'), anchors = document.querySelectorAll('a[data-target="modal"]'), l = anchors.length;
		for (var i = 0; i < l; i++) {
			anchors[i].addEventListener("click", function(e) {
				e.preventDefault();
				title.textContent = this.dataset.videoTitle || 'No title';
				ytVideo.src = this.href;
				modal.classList.toggle('is-visible');
				modal.focus();
			});
		}
		modal.addEventListener("keydown", function(e) {
			if (e.keyCode == 27) {
				title.textContent = '';
				ytVideo.src = '';
				this.classList.toggle('is-visible');
			}
		});
		closeBtn.addEventListener("click", function(e) {
			e.preventDefault();
			title.textContent = '';
			ytVideo.src = '';
			modal.classList.toggle('is-visible');
		});

#modal {
			display: none;
			position: fixed;
			width: 100vw;
			height: 100vh;
			max-height: 100vh;
			top: 0;
			left: 0;
			background: rgba(24, 24, 24, .6);
			z-index: 999;
		}
		#modal .content {
			width: 55%;
			height: 65vh;
			margin: auto; /* allows horyzontal and vertical alignment as .content is in flex container */
		}
		#modal .content .yt-video {
			display: block;
			width: 100%;
			height: calc(100% - 45px);
		}
		#modal .content .title {
			box-sizing: border-box;
			height: 45px;
			line-height: 23px;
			padding: 12px 4px;
			margin: 0;
			background: #007bff;
			max-width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		#modal .close {
			position: absolute;
			top: 0;
			right: 0;
			width: 35px;
			height: 35px;
			line-height: 35px;
			text-align: center;
			border: 0;
			font-weight: bold;
			font-size: 24px;
			color: #fff;
			background: #666;
			cursor: pointer;
			transition: background .4s;
		}
		#modal .close:hover, #modal .close:active {
			background: #ef3658;
		}
		#modal.is-visible {
			display: flex;
		}

<ul id="toolsButtons" class="ahrefs__tools__nav">
	  <li>
	    <div class="tools-icon">
	      <a href="https://www.youtube.com/embed/A1nRiiWYgZw" target="_blank" data-target="modal" data-video-title="Traditional vs GATE"><img src="Traditional_vs_GATE_s.png"></a>
	      <use xlink:href="#keyword-research-icon"></use>
	      <p class="tools-icon__text">Traditional vs GATE</p>
	  </li>
	  <li>
	    <div class="tools-icon">
	      <a href="https://www.youtube.com/embed/wLHfGQlLqtE" target="_blank" data-target="modal" data-video-title="GATE Passcode"><img src="Guess_GATE_Password.png"></a>
	      <use xlink:href="#competitive-analysis-icon"></use>
	      <p class="tools-icon__text">GATE Passcode</p>
	    </div>
	  </li>
	  <li>
	    <div class="tools-icon">
	      <a href="https://www.youtube.com/embed/5tAGemIvUeI" target="_blank" data-target="modal" data-video-title="How GATE Works"><img src="GATE_Demo.png"></a>
	      <use xlink:href="#keyword-research-icon"></use>
	      <p class="tools-icon__text">How GATE Works</p>
	    </div>
	  </li>
	</ul>
  <!-- the modal div that will open when an anchor link is clicked to show the related video in an iframe. -->

	<div id="modal" tabindex="-1">
		<button type="button" data-dismiss="modal" class="close" title="close">&times;</button>
		<div class="content">
			<h4 class="title"></h4>
			<iframe class="yt-video" src="https://www.youtube.com/embed/A1nRiiWYgZw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
		</div>
	</div>

必须在 HTML 中完成的更改代码:

• 每个a包含 href 的标签您希望在模式中显示的视频的属性必须具有 data-target属性等于“模态”。
• 在模态 div 时在视频上方显示标题显示，添加 data-video-title等于这些 a 上的某些文本的属性标签。如果data-video-title不存在于链接中，则视频上方显示的标题将为“无标题”。
• 作为对最后两点的说明，这里有一个链接示例，单击该链接将打开模式:<a href="https://www.youtube.com/embed/A1nRiiWYgZw" target="_blank" data-target="modal" data-video-title="Traditional vs GATE"><img src="Traditional_vs_GATE_s.png"></a>
• 所有视频链接(即 href 标签的 a 属性)必须是 embed链接(以 https://www.youtube.com/embed/A1nRiiWYgZw 为例)。所以，你必须使用 src 中的链接的 iframe在embed下share 下的部分YouTube 上的部分。这里有一些图片可以证明这一点:

为什么使用 embed而不是常规的 watch链接？

那是为了防止跨域策略限制。简而言之，默认情况下服务器不允许其他服务器/站点异步获取它们的文件。

关于模态的注释 div

• 为简单起见，我没有做任何动画作为打开/关闭效果，而且模态没有响应。
• 您可以按ESC (退出)按钮关闭模式。
• 带有“十字”符号的按钮将放置在浏览器窗口的右上角，用于在点击时关闭模式。
• 模态框的标记 div必须保留以按预期工作。

为什么我没有使用 data-href而不是 href ?

我坚持使用 href在链接上保证即使 JavaScript 也可以访问视频。被禁用，如果被禁用，它将被重定向到视频。

希望我的回答能让你更进一步。我在这里是为了进一步的解释。