如何单击视频链接并让它在下面的区域播放? [英] How to click from a video link and let it play in an area below?

查看：86
本文介绍了如何单击视频链接并让它在下面的区域播放?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

    <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">传统 vs GATE</p><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">门密码</p>

<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">GATE 的工作原理</p>

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

解决方案

正如我在评论中所建议的，我创建了一个 div，最初是隐藏的，它扮演一个弹出模式的角色，它将单击具有 data-target="modal" 的 a 标记时显示.我对您的 HTML 代码进行了一些更改，我将在答案中介绍它们.

流程:

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

最终结果:

Ps:我将提供一个可运行的代码段，但是由于 Stack Overflow 的一些限制，它可能无法按预期工作.为此，我在 CodePen 上制作了一个有效的

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

这是为了防止跨域策略限制.简单来说，默认情况下，服务器不允许其他服务器/站点异步获取它们的文件.

关于模态div

的注意事项
  • 为简单起见，我没有做任何动画作为打开/关闭效果，并且模态没有响应.
  • 您可以按ESC(退出)按钮关闭模态.
  • 带有十字"符号的按钮将放置在浏览器窗口的最右上角，以在点击时关闭模态.
  • 必须保留模态 div 的标记才能按预期工作.

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

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

希望我的回答能让你更进一步.我是来这里做进一步解释的.

I have several videos on my site, they are listed like the following :

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

How can I create a viewing area below the list, so that when a video link is clicked, it will play in the viewing area?

解决方案

As I suggested in the comments, I created a div, initially hidden, that plays the role of a popup modal that will be showed when an a tag that has a data-target="modal" is clicked. I made some changes to your HTML code that I will cover them in the answer.

The process:

When you click a link that has data-target="modal" (a link that has an href attribute of a video, here I added a data-target="modal" to each one just to differentiate these links from the other links that may be present in the page) the modal div that i gave it id="modal" will be showed and filled with the appropriete video. So, each time a link is clicked its href attribute will be placed in the src attribute of the iframe tag that will host the video.

The final result:

Ps: I'll provide a runnable snippet, but, it may not work as intended due to some restrictions made by Stack Overflow. For that, I made a working DEMO on CodePen that you can check and play with the code, if you want.

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>

Changes that must be done in the HTML code:

  • Each a tag that holds an href attribute for a video that you want it to be showed in the modal must have a data-target attribute equals to "modal".
  • To display a title above the video when the modal div is showed, add a data-video-title attribute that equals to some text on these a tags. If the data-video-title is not present on a link, the title that appears above the video will be "No title".
  • As an illustration to the last 2 points, here's an example of a link that will open the modal when clicked: <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>
  • All the videos links (in other words the href attribute of the a tags) MUST be an embed link (https://www.youtube.com/embed/A1nRiiWYgZw as an example). So, you have to use the link in the src of the iframe under the embed section under share section on YouTube. Here are some images to demonstrate that:

Why using embed instead of the regular watch link ?

That to prevent Cross-Domain-Policy restrictions. In simple words, by default servers don't allow other servers/sites to fetch their files asynchronously.

Notes on the modal div

  • For simplicity, I didn't done any animations as opening/closing effects, and the modal isn't responsive.
  • You can press ESC (Escape) button to close the modal.
  • A button with a "cross" sign will be placed on the top-right most of the browser window, to close the modal on click.
  • The markup of the modal div must be reserved to work as intended.

Why i didn't use data-href instead of href ?

I sticked with the href on the links to garantee that the video will be accessible even if JavaScript is disabled, if so, it will be redirected to the video.

Hope my answer pushed you further. I'm here for any further explanations.

这篇关于如何单击视频链接并让它在下面的区域播放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆