Javascript 如何构建像Facebook这样的选项卡式视频播放器_Javascript_Html_Carousel_Video Player

Javascript 如何构建像Facebook这样的选项卡式视频播放器

javascript html

Javascript 如何构建像Facebook这样的选项卡式视频播放器,javascript,html,carousel,video-player,Javascript,Html,Carousel,Video Player,Facebook有一个新的视频播放器窗口，其中视频播放器固定在三个选项卡上：信息、评论和下一步我已经重新创建了设计，但如何在“上一步”选项卡下创建与上述固定视频播放器对应的旋转木马播放列表这是一张Facebook的照片。代码在下面 '); }) 以下是w3schools的演示：伦敦巴黎东京伦敦伦敦是英国的首都巴黎巴黎是法国的首都。东京东京是日本的首都函数openCity（cityName）{ var i； var x=document.getElementsByC

Facebook有一个新的视频播放器窗口，其中视频播放器固定在三个选项卡上：信息、评论和下一步

我已经重新创建了设计，但如何在“上一步”选项卡下创建与上述固定视频播放器对应的旋转木马播放列表

这是一张Facebook的照片。代码在下面


');
})

以下是w3schools的演示：


伦敦
巴黎
东京
伦敦
伦敦是英国的首都
巴黎
巴黎是法国的首都。
东京
东京是日本的首都
函数openCity（cityName）{
var i；
var x=document.getElementsByClassName（“城市”）；
对于（i=0；i

向我们展示您所做的尝试，以及您面临的问题，我们将能够为您提供更多帮助。我的错，我以为我做了，但忘了缩进。：）我上传了我的代码。我想做的是在选项卡上添加一个视频播放器，但视频转盘位于视频选项卡下

<html>
<head>
 <meta charset="utf-8"/>
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/main1012018.css" rel="stylesheet" type="text/css">

</head> 

<body>  
 <div id="page" >

 <!--/LOGO PANEL/-->    
 <div id="logo" >
 <img class="name" background-color="transparent" height="20px"  alt=""/>
</div>


<h3>Monitor</h3>
  <p>The fixed Video Player is always randomly playing one of the videos from the Video tab below. If you click one of the buttons below it changes the content for that tab</p>

<div id="controls"></div>
<div id="Profile" class="tabcontent"></div>

 <div class="tab">
  <button class="tablinks" onclick="openCity(event, 'OnNow')">On Now</button>
  <button class="tablinks" onclick="openCity(event, 'Beans')">Videos</button>
 </div>

<div id="menu2">
 <div id="OnNow" class="tabcontent">
  <h3>OnNow</h3>
  <p>Displays the title and description of what is actively playing in the video player.</p>
</div>

<div id="Beans" class="tabcontent">
  <h3>Video</h3>
  <p>This tab contains rows each with videos that corresponds to that row that I can scroll through like Netflix/Amazon/Hulu. When you select a video/push play then the above video player is interuppted and plays the video. Each Row is a following Genre: Newest, Top 10(you follow), Friend's Channel, Int'l </p>
</div>  
</div>  

<script>
function openCity(evt, cityName, skipClass) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
  tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
 if(!skipClass) {
   for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
   }
   }

  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
  }

  $('.link').click(function(event){
  event.preventDefault();
  var url =$(this).html();
  $("#videoDiv").html('<iframe width="400" height="400" src="'+url+'?wmode=transparent" frameborder="0" allowfullscreen></iframe>');

 })
 </script>
 </body>
 </html>