0
現在、私は単純なサイトを持っており、左側のナビゲーションメニューを作成して、ユーザーがビデオをクリックできるようにしたいと考えています再生するようにすると、ビデオは画面の右側に表示されます。これは私がこれまでにその特定のページのために持っているものです。JavaScriptを使用してHTMLページに動画を動的に追加する
$(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をクリアしてから、自動再生せずに必要なビデオを取り込む必要があります。
レイアウトを正しく考えているかどうかはわかりませんが、ナビゲーションは左側に、ビデオは基本的に残りの部分をビデオの右側に表示しようとしていますトップナビゲーションの下に表示されます。
私はタイトルを書いていたときに表示される他のいくつかの質問を見ましたが、私がやっていることを助ける良いリソースではないと思います。
ありがとうございました。
。基本的にサムネイルが表示されます。また、ビデオを左側のナビゲーションに近づける方法もありますか？浮いているか何か？ – Schwagmister
ビデオ要素が右半分のdivのほとんどの部分に配置されています – Sajan
私はそれをより近くに移動したい場合、左のdivの幅をどのように小さくするのですか？ – Schwagmister