个人中心
gpt4 book ai didi

javascript - 使用 JavaScript 将视频动态添加到 html 页面

转载 作者：太空宇宙 更新时间：2023-11-04 02:02:14 27 4
gpt4 key购买 nike

我目前有一个简单的网站，我想在其中一个页面的左侧制作一个导航菜单，允许用户单击他们想要播放的视频，然后该视频会出现在屏幕的右侧。这是我目前针对该特定页面的内容。

$(document).ready(function() {

  $(".playVid").click(function() {

    $("#right-side").innerHTML = "";

    var play = "samplemp" + this.id.slice(3, 4) + ".mp4";

    src = "<source src='" + play + "' type='video/mp4'>"

    var add = "<video width='680' height='500' autoplay='0' controls loop='0'>" + src + "</video>"

    alert(add)

    $("#right-side").innerHTML.append(add)


  });

})
#table-title {
  Font-Size: 50px;
  text-align: Left;
  padding-bottom: 5px;
  padding-top: 5px;
}
#cssmenu2,
#right-half {
  float: left;
  width: 50%;
}
@import url(https://fonts.googleapis.com/css?family=Roboto:700);
 #cssmenu2,
#cssmenu2 ul,
#cssmenu2 ul li,
#cssmenu2 ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu2 {
  font-family: Roboto, sans-serif;
}
#cssmenu2 > ul {
  width: 180px;
  background: #ffffff;
}
#cssmenu2 > ul > li > a {
  padding: 12px 15px;
  font-size: 14px;
  color: #666666;
  font-weight: 700;
  text-decoration: none;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  -ms-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu2 > ul > li:hover > a,
#cssmenu2 > ul > li > a:hover {
  color: #222222;
}
#cssmenu2 ul li.has-sub > a::after {
  position: absolute;
  right: 15px;
  display: block;
  width: 10px;
  height: 10px;
  content: "";
  border-radius: 2px;
}
#cssmenu2 > ul > li.has-sub > a::after {
  top: 14px;
  background: #666666;
}
#cssmenu2 > ul > li.has-sub:hover > a::after,
#cssmenu2 > ul > li.has-sub > a:hover::after {
  background: #222222;
}
#cssmenu2 ul ul li.has-sub > a::after {
  top: 13px;
  background: #ffffff;
}
#cssmenu2 ul ul li.has-sub:hover > a::after,
#cssmenu2 ul ul li.has-sub > a:hover::after {
  background: #dddddd;
}
#cssmenu2 ul li.has-sub > a::before {
  position: absolute;
  right: 15px;
  z-index: 2;
  display: block;
  width: 0;
  height: 0;
  border: 3px solid transparent;
  content: "";
}
#cssmenu2 > ul > li.has-sub > a::before {
  top: 16px;
  border-left-color: #ffffff;
}
#cssmenu2 ul ul li.has-sub > a::before {
  top: 15px;
  border-left-color: #2e353b;
}
#cssmenu2 ul {
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  perspective: 600px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#cssmenu2 ul ul {
  position: absolute;
  top: 0;
  left: -9999px;
  width: 180px;
  background: #2e353b;
  opacity: 0;
  -moz-transition: opacity 0.2s ease, -moz-transform 0.2s ease;
  -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
  -ms-transition: opacity 0.2s ease, -ms-transform 0.2s ease;
  -o-transition: opacity 0.2s ease, -o-transform 0.2s ease;
  transition: opacity .2s ease, transform .2s ease;
  -webkit-transform: rotate3d(0, 1, 0, 45deg);
  -moz-transform: rotate3d(0, 1, 0, 45deg);
  transform: rotate3d(0, 1, 0, 45deg);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  transform-origin: left center;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
#cssmenu2 ul li:hover > ul {
  left: 100%;
  opacity: 1;
  transform: rotate3d(0, 0, 0, 0);
}
#cssmenu2 ul ul::after {
  position: absolute;
  left: -8px;
  top: 14px;
  z-index: 5;
  display: block;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-right-color: #2e353b;
  content: "";
}
#cssmenu2 ul ul a {
  padding: 12px 15px;
  font-size: 12px;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  -ms-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu2 ul ul li:hover > a,
#cssmenu2 ul ul li a:hover {
  color: #dddddd;
}
<!doctype html>
<html lang=''>

<head>
  <meta charset='utf-8'>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Josh Schweigert - Embedded Systems</title>

  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script src="https://s3.amazonaws.com/menumaker/menumaker.min.js" type="text/javascript"></script>
  <script src="script.js"></script>
  <script src="embedded.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="embedded.css">

</head>


<body>

  <div id="cssmenu">
    <ul>
      <li><a href="index.html" target="_self">Home</a>
      </li>
      <li class="active"><a href="embedded.html" target="_self">Embedded Systems</a>
      </li>
      <li><a href="contact.html">Contact</a>
      </li>
    </ul>
  </div>
  <div id="cssmenu2">
    <div id="table-title" width="auto">Lab Videos</div>
    <ul>
      <li class="playVid" id="vid1"><a href=""><i class="fa fa-fw fa-play"></i> Lab 1 -</a>
      </li>
    </ul>
  </div>

  <div id="right-half">

  </div>

</body>

</html>

实际的导航菜单不会正确显示，因为 CSS 位于不同的文件中。基本上，每当用户点击左侧导航中的视频时，它应该清除右侧的 div，然后在不自动播放的情况下引入他们想要的视频。

我不确定我是否正确地考虑了布局，但我试图让导航位于左侧，视频基本上占据视频导航右侧的屏幕其余部分但在顶部导航下方。

我已经查看了在撰写标题时出现的其他一些问题，但我认为它们不是帮助我完成工作的好资源。

感谢您的帮助。

最佳答案

我使用了 Sajan 的解决方案并将控件属性添加到视频标签。视频不会自动播放，这正是我想要的，但没有播放视频的控件，所以应该添加它们。

$('#right-half').html('<video width="320" height="240" src='+play+' type="video/mp4" controls> </video>');

关于javascript - 使用 JavaScript 将视频动态添加到 html 页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41561851/

27 4 0
文章推荐： C - 将两个结构附加到单个缓冲区
文章推荐： c - backspace\b 在 C 格式字符串中\n 之前不起作用
文章推荐： python - 幂律拟合给出一条直线
文章推荐： c - 数组充满了文件中的最后一个元素
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com