Unable to display title of video element in the UI - javascript

I am learning webapplication development using HTML,CSS and JS. Curretly i am trying to display all the videos stored to the UI, i am stuck in displaying the names of the video below them. Currently i am able to display the title of video element only for one video, but if i add more videos i am not able to dispaly the title below them, below is the code i am working on, Can you guys please guide me to achieve to display the title in video element on all the videos
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>Videos</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="videos.css">
</head>
<body>
<header>
<h1> Main logo </h1>
<nav>
<ul id="nav">
<li>Home</li>
<li>Videos</li>
</ul>
</nav>
</header>
<div class="divider"></div>
<figure>
<video id="video_player" title="movie1" width="300" height="240" controls>
<source src="1.mp4" type="video/mp4">
</video>
<figcaption id="meta"></figcaption>
</figure>
<figure>
<video id="video_player1" title="movie2" controls width="300" height="240" controls>
<source src="2.mp4" type="video/mp4" />
</video>
<figcaption id="meta1"></figcaption>
</figure>
<figure>
<video id="video_player3" title="movie3" controls width="300" height="240" controls>
<source src="3.mp4" type="video/mp4" />
</video>
<figcaption id="meta2"></figcaption>
</figure>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="videos.js"></script>
</body>
</html>
css code:
header {
background: green;
color: white;
padding: 8px 0px 6px 40px;
height: 50px;
}
header h1 {
font-size: 30px;
float: left;
margin-top: 0px;
margin-right: 50px;
}
nav ul{
padding: 0px;
float: left;
}
nav ul li{
display: inline-block;
list-style-type:none;
color: white;
float: left;
margin-left: 15px;
}
nav ul li a{
color: white;
text-decoration: none;
}
#nav {
font-family: 'Montserrat', sans-serif;
}
.divider{
background-color: red;
height: 5px;
}
figure {
display: inline-block;
}
figure video {
vertical-align: top;
}
figure figcaption {
text-align: center;
}
js code:
var myVideoPlayer = document.getElementById('video_player' , 'video_player1' , 'video_player2'),
title = myVideoPlayer.getAttribute("title"),
meta = document.getElementById('meta' , 'meta1' , 'meta2');
myVideoPlayer.addEventListener('loadedmetadata', function () {
meta.innerHTML = title ;
});
edit:
var meta = document.getElementById("meta");
var metaa = nums.getElementsByTagName("figcaption");
var newNums = [];
for (var i=0; i < metaa.length; i++) {
newNums.push( parseInt( metaa[i].innerHTML, 10 ) );
}

From where are you calling the eventlistener ('loadedmetadata') ?
Adding something like this code makes it work.
function loadedmetadata(){ meta.innerHTML = title ; } loadedmetadata();
Check your function loadedmetadata, I think it's not getting called.
Also this is wrong.
meta = document.getElementById('meta' , 'meta1' , 'meta2');
This will only take the first value.
You need to create a function which will loop through the id list.

Related

Video.js controls showing wierdly, why?

My video.js controls are not showing in the video but outside the video with lot's of unnecessary options as shown in the screenshot below.
My code is like this:
{% block content%}
<style>
#video-js {
max-width:auto;
width:auto;
max-height:auto;
height:auto;
margin:auto;
padding:auto;
background-color: #343A40;
}
</style>
<video
id="video-js"
class="video-js vjs-custom-skin"
controls
preload="auto"
width=""
height=""
data-setup=""
autoplay
>
<source src="http://url.m3u8" type="application/x-mpegURL" />
<source src="http://url.flv" type="video/x-flv" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<br>
<br>
<script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
<script src="https://unpkg.com/browse/#videojs/http-streaming#2.6.0/dist/videojs-http-streaming.js"></script>
{% endblock %}
How can I have these weird controls be gone and just have normal in video controls like play, pause, mute, volume up/down.
You need to add the Video.js styles, https://vjs.zencdn.net/7.10.2/video-js.css
Also, while it's not the cause of the problem, including http-streamimg is redundant. It's included in Video.js 7+.
After adding the Video.js styles mentioned above, you
should then be able to eliminate, re-arrange controls and tweak coloring,
by adding lines like these:
<!-- Change ordering "current-time / duration" to appear on control-bar: -->
<!-- See: https://github.com/videojs/video.js/issues/2507 -->
<style>
.video-js .vjs-current-time { display: block; }
.video-js .vjs-time-divider { display: block; }
.video-js .vjs-duration { display: block; }
.video-js .vjs-remaining-time { display: none; }
.video-js .vjs-load-progress{display: inline-block; background: PaleGreen; height: 8px; width:100%; }
.video-js .vjs-play-progress{display: inline-block; background: LightCoral; height: 8px; width:100%;}
.video-js .vjs-picture-in-picture-control { display: none; }
# (These with leading "#" sign are 'commented-out'...are present here just so the NAMES of various entities are avail for experimenting.)
#.video-js .vjs-progress-holder { margin-left: 0px; margin-right: 0px; background: Blue; }
#.video-js .vjs-loading-spinner{display: block;}
#.video-js .vjs-progress-holder .vjs-play-progress { display: none; }
</style>
Hope these help...

HTML layout on mobile devices not working properly

I need to know how to correct this layout on my 404 page of my website. It works fine on a desktop but the layout of the actual page (not the header) gets messed up on mobile. The code is below.
THE LINK TO THE SITE IS WWW.ROGERSARTWORK.CO.UK/404
HTML CODE
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header").load("nav.html");
});
</script>
</head>
<body>
<div id="header"></div>
</body>
</html>
<div id="content">
<html>
<title>404 Not Found</title>
<img src="/images/logo.png" alt="Roger's Artwork Logo" width="320" height="272" />
<p></p>
<img class="image1" src="https://www.rogersartwork.co.uk/images/404.png" alt="Error 404 Image" width="832" height="249"/>
<p>The page you were looking for does not exist. Please return to our homepage.</p>
<script type="text/javascript">
document.addEventListener('contextmenu', event => event.preventDefault());
</script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</html>
</div>
</div>
CSS
<style>
#content {
padding-top: 40px;
}
h1 {
font-size: 45pt;
font-family: Verdana;
font-weight: bold;
text-align: center;
}
#content {
padding-top: 50px;
}
p {
font-size: 25pt;
font-family: Verdana;
text-align: center;
}
body {
text-align: center;
background: #eeeeee;
}
html {
background: #eeeeee;
}
</style>
AND THE LINK TO THE SITE IS WWW.ROGERSARTWORK.CO.UK/404
IMAGE FOR #sbgib
It looks like the only issue is the scaling of the images. This can be fixed by adding CSS rules to make them full width for mobile and then adding one or more media queries to set the images to their full sizes at certain screen sizes. For example:
#content {
padding-top: 40px;
}
h1 {
font-size: 45pt;
font-family: Verdana;
font-weight: bold;
text-align: center;
}
#content {
padding-top: 50px;
}
p {
font-size: 25pt;
font-family: Verdana;
text-align: center;
}
body {
text-align: center;
background: #eeeeee;
}
html {
background: #eeeeee;
}
#content>title+img,
.image1 {
width: 100%;
height: auto;
}
#media screen and (min-width: 500px) {
#content>title+img {
width: auto;
max-width: 100%;
}
.image1 {
width: auto;
max-width: 100%;
}
}
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
</script>
<script>
$(function() {
$("#header").load("nav.html");
});
</script>
</head>
<body>
<div id="header"></div>
</body>
<div id="content">
<title>404 Not Found</title>
<img src="https://www.rogersartwork.co.uk/images/logo.png" alt="Roger's Artwork Logo" width="320" height="272" />
<p></p>
<img class="image1" src="https://www.rogersartwork.co.uk/images/404.png" alt="Error 404 Image" width="832" height="249" />
<p>The page you were looking for does not exist. Please return to our homepage.</p>
<script type="text/javascript">
document.addEventListener('contextmenu', event => event.preventDefault());
</script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</div>
</div>
</html>
Remove the width and height attributes from your image tags. What you should do instead is style them with css. For example, you can add and id to them and target that with css, or you can also do an inline style, like so:
Using inline styling:
<img src="/images/logo.png" alt="Roger's Artwork Logo" style="max-width: 20rem" />

Removing all images from a webpage in an iframe using CSS or JavaScript

I would like to remove all images that are to be displayed on an HTML file, which contains a refreshed iframe.
Is there possibly a method using CSS or JavaScript that would do so?
The page that loads the iframe uses the code below.
function reloadIFrame() {
console.log('reloading..');
document.getElementById('iframe').contentWindow.location.reload();
}
window.setInterval(reloadIFrame, 3000);
body {
margin: 0px;
}
h1 {
font-family: arial;
font-size: 50%;
}
iframe {
width: 100%;
height: 800px;
}
div.top {
background-color: rgba(2, 109, 8, 0.83);
height: 1%;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="news.png" type="image/x-icon" />
<title>Chat</title>
</head>
<body>
<div class="top">
<img src="news.png" alt="newsicons" height="31" width="31">
<h1>News</h1>
</div>
<iframe id="iframe" src="http://www.bbc.com/news/world"></iframe>
</body>
</html>
You can do this using javascript. Check updated snippet below..
if(document.getElementById('iframe')) {
var images = document.getElementsByTagName('img');
for (i = 0; i < images.length;i++ ) {
images[i].style.display = "none";
}
}
<div class="top">
<img src="news.png" alt="newsicons" height="31" width="31">
<h1>News</h1>
</div>
<iframe id="iframe" src="http://www.bbc.com/news/world"></iframe>

load another html page in Jquery, when click event happens on iframe element

Please excuse me i have a very basic question as i am still getting hands on Jquery.
I am trying to load another .html page on click of any figure element in this .html page but script tag is not working as expected can anyone help with the below js
html code:
$(document).ready(function(){
$("figure").click(function(){
$(this).load("singlevideo.html");
});
});
* {
padding:0px;
margin:0px;
}
body {
margin:0;
padding:0;
height:100%;
}
header {
background: green;
color: white;
padding: 8px 0px 6px 40px;
height: 50px;
}
.navbar.navbar-inverse.navbar-fixed-top {
background-color: green; /* fallback color, place your own */
font-weight: 400;
color: white;
text-decoration: none;
}
header h1 {
display: inline;
font-family: 'Oswald',sans-serif;
font-weight: 400;
font-size: 32px;
float: left;
margin-top: 0px;
margin-right: 10px;
}
nav ul{
display: inline;
padding: 0px;
float: left;
}
nav ul li{
display: inline-block;
list-style-type:none;
color: white;
float: left;
margin-left: 15px;
}
nav ul li a{
color: white;
text-decoration: none;
}
#nav {
font-family: 'Montserrat', sans-serif;
position: fixed;
}
.homered{
background-color: red;
padding: 30px 10px 30px 10px;
}
.homeblack:hover{
background-color: blue;
padding: 30px 10px 30px 10px;
}
div{
width:250px;
height:666px;
background:#1A8DA9;
}
div a{
text-decoration:none;
color:white;
padding:20px;
padding-right:100px
}
div ul li{
list-style-type:none;
display:block;
padding :15px;
border-bottom:1px solid #236D7F;
}
div ul li :hover{
background:#4097AD;
transition:linear all 0.40s;
margin-left:10px;
}
div ul li a:hover{
color:black;
}
#navBar {
float: left;
position: fixed;
}
#nav {
float: right;
}
#maincontent{
width: 80%;
height: auto;
outline: 1px solid;
position: absolute;
right: 0;
background: white;
}
figure {
display: inline-block;
}
}
figure figcaption {
text-align: center;
}
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}
.footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:green;
text-align: center;
}
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>Videos</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="videos.css">
</head>
<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top">
<h1> Main logo </h1>
<ul id="nav">
<li><a class="homeblack" href="index.html">Home</a></li>
<li><a class="homered" href="videos.html">Videos</a></li>
<li><a class="homeblack" href="news.html">News</a></li>
<li><a class="homeblack" href="contactus.html">Contactus</a></li>
</ul>
</nav>
</header>
<div id="navBar">
<ul>
<li>video </li>
<li>video </li>
<li>video </li>
<li>video </li>
</ul>
</div>
<div id="maincontent">
<figure id="1">
<iframe width="300" height="240" src="https://www.youtube.com/embed/VORxzZazSnc" frameborder="0" allowfullscreen></iframe>
<figcaption> Trailer </figcaption>
</figure>
<figure id="2">
<iframe width="300" height="240" src="https://www.youtube.com/embed/VORxzZazSnc" frameborder="0" allowfullscreen></iframe>
<figcaption> Trailer</figcaption>
</figure>
<figure id="3">
<iframe width="300" height="240" src="https://www.youtube.com/embed/_fL4RuPcDw4" frameborder="0" allowfullscreen></iframe>
<figcaption> trailer </figcaption>
</figure>
<figure id="4">
<iframe width="300" height="240" src="https://www.youtube.com/embed/7yxNzMhXSr4" frameborder="0" allowfullscreen></iframe>
<figcaption> trailer </figcaption>
</figure>
<figure id="5">
<iframe width="300" height="240" src="https://www.youtube.com/embed/ljuBWvzZtyc" frameborder="0" allowfullscreen></iframe>
<figcaption> trailer</figcaption>
</figure>
<figure id="6">
<iframe width="300" height="240" src="https://www.youtube.com/embed/2ZBHa9gIOp4" frameborder="0" allowfullscreen></iframe>
<figcaption>Trailer</figcaption>
</figure>
</div>
<div class="footer">
<p style="color:white; font-size:20px; font-weight:bold;">Copyright © Education Students</p>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
you can make use of the .load function, not to be confused with the load event handler.
.load() can be used to load data to an element - here's a reference http://api.jquery.com/load/
here's a basic example of how to use, the code is not like yours, it's just a template for you to use :)
html:
<button id="clickMe" type="button">Click Me</button>
<div id="targetLoad"></div>
jQuery:
$('#clickMe').on('click', function()
{
$('#targetLoad').load('path/to/html.html')
});
this will load html.html into the div with the id of targetLoad.
Your issue with your .on() function is that you use a single world, instead of a class or id. To target an id use # and for classes use .
update 1
didn't realise fully this was for an iframe - the problem with this is, because it's a dynamic element that isn't technically part of the DOM, the event won't fire, or at least shouldn't. But you can use the below to target dynamic elements:
$(document).on('click', '.myDynamicElement', function() {})
and this applies the click action on document where the target has a class of myDynamicElement, which is how you get around working with dynamic elements.
To target your iframe though, it might be better to use .find() as the iframe is it's own entity in a way. The above might work for it, but I reckon this should work
var element = $(document).find('.myIframe').find('figure');
$(document).on('click', element, function() {});
update 2 - req from OP in comments below
Example of how to use dynamic event handling:
$('body').on('change', '.myDropdown', function()
{
alert($(this).val())
})
in this case, every change to an input that has a class of .myDropdown, then alert the current value of it.
You are just embedding a youtube video to your frame, so click event on youtube page will always work for video functions of youtube and your java script click event is working on the name "Trailer" of your page. Just click on the name "trailer" and check it is working.
Instead of embedding a youtube video just have the preview and url of the video and have a click event on the url to load that video on separate page as u expected.

Simple gallery loading all pictures when opened for a first time

I am a beginer trying to make a gallery for my site, but I am failing somewhere. What I am trying to do is create a page with menu on the top and then under it boxes of small pictures. When you click on one of them, the picture should be loaded under those boxes. So far I have my menu done, and I have the boxes with the pictures, but the problem is that when you first load the page all of the pictures in the small boxes are loaded under and when you click on any boxes - they disapear and only the selected picture is loaded, as it should be. So my problem is that I can't make the page not load all those pictures when loaded for a first time. I don't mind if it just loads one of them, but not all. I've been trying to fix it for 3 days now, but no luck, so I have no choice, but to ask you for help.
Here's the HTML:
<!DOCTYPE HTML>
<HEAD>
<LINK href="Menu/Menu.css" rel="stylesheet" type="text/css" />
<LINK href="Pictures/Background.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="Style/style.css"/>
<script type="text/javascript" src="JavaScript/Script.js"></script>
</HEAD>
<BODY>
<nav class="nav">
<ul>
<li class="current"><b>MENU</b></li>
<li>BLOG</li>
<li>MUSIC</li>
<li>PHOTOGRAPHY</li>
<li>QUOTES & THOUGHTS</li>
<li>ABOUT ME</li>
</ul>
</nav>
<div id="gallery">
<div id="thumbs">
<img src="Pictures/Photography/image1.jpg" alt="" />
<img src="Pictures/Photography/image2.jpg" alt="" />
<img src="Pictures/Photography/image3.jpg" alt="" />
<img src="Pictures/Photography/image4.jpg" alt="" />
<img src="Pictures/Photography/image5.jpg" alt="" />
</div>
<CENTER>
<div id="bigimages">
<div id="normal1">
<img src="Pictures/Photography/bigimage1.jpg" alt=""/>
</div>
<div id="normal2">
<img src="Pictures/Photography/bigimage2.jpg" alt=""/>
</div>
<div id="normal3">
<img src="Pictures/Photography/bigimage3.jpg" alt=""/>
</div>
<div id="normal4">
<img src="Pictures/Photography/bigimage4.jpg" alt=""/>
</div>
<div id="normal5">
<img src="Pictures/Photography/bigimage5.jpg" alt=""/>
</div>
</div>
</div>
</BODY>
</HTML>
Here's the CSS:
html{
background:url(BACKGROUND.jpg) no-repeat center center;
min-height:100%;
background-size:cover;
}
img {
border: none;
}
#gallery {
margin: 0 auto;
width: 100%;
}
#thumbs {
margin: 10px auto 10px auto;
width: 100%;
}
#bigimages {
width: 100%;
float: left;
}
#thumbs img {
width: 50px;
height: 50px;
}
#bigimages img {
border: 4px solid #555;
margin-top: 5px;
height: 500px;
}
#thumbs a:link, #thumbs a:visited {
width: 50px;
height: 50px;
border: 6px solid #555;
margin: 6px;
float: left;
}
#thumbs a:hover {
border: 6px solid #888;
}
And finally here's my simple JavaScript:
function changeImage(current) {
var imagesNumber = 5;
for (i=1; i<=imagesNumber; i++) {
if (i == current) {
document.getElementById("normal" + current).style.display = "block";
} else {
document.getElementById("normal" + i).style.display = "none";
}
}
}
You could simply hide them via CSS.
#bigimages > div:not(:first-child) { display: none; }
This should display only the first big image.
Could be easier yet if you added a class to the image wrappers. Assuming the class could be big-image-wrap, the css would be:
#bigimages > div.big-image-wrap { display: none; }
#bigimages > div.big-image-wrap:first-child { display: block; }
You can hide those images on load event. Like this:
window.onload = function(){
var thumbs = document.getElementById('thumbs');
var images = thumbs.getElementsByTagName('img');
for (i = 0; i < images.length;i++ ) {
images[i].style.display = "none";
}
}

Categories